Blog content starts behind header

I’m writing a Drupal 7 theme, mostly from scratch based off of the Stark starter theme
When I add a fixed header the blog contents starts behind the header, I don’t mind if it scrolls up like that. The header will have a solid background so it wouldn’t show, but you can’t read the top of the blog. I’ve tried adding the class .clearfix but it’s still being drawn behind the logo.


 * @file
 * Stark layout method
 * To avoid obscuring CSS added to the page by Drupal or a contrib module, the
 * Stark theme itself has no styling, except just enough CSS to arrange the page
 * in a traditional "Header, sidebars, content, and footer" layout.
 * This layout method works reasonably well, but shouldn't be used on a
 * production site because it can break. For example, if an over-large image
 * (one that is wider than 20% of the viewport) is in the left sidebar, the
 * image will overlap with the #content to the right. The exception to this
 * is IE6 which will just hide the navigation block completely in these
 * instances due to a positioning bug.

#sidebar-second {
  float: left;
  display: inline;
  position: relative;

#content {
  width: 100%;
body.sidebar-first #content {
  width: 80%;
  left: 20%; /* LTR */
body.sidebar-second #content {
  width: 80%;
body.two-sidebars #content {
  width: 60%;
  left: 20%;

#sidebar-first {
  width: 20%;
  left: -80%; /* LTR */

body.two-sidebars #sidebar-first {
  left: -60%; /* LTR */

#sidebar-second {
  float: right; /* LTR */
  width: 20%;

.section {
  margin: 10px;
@font-face {
    font-family: MuseoSans;
    src: url(css\Fonts\Museo_Sans\MuseoSans-300.otf);
@font-face {
    font-family: OpenSans;
    src: url(css\Fonts\Open_Sans\OpenSans-Regular.ttf);
    font-family: OpenSans;
    padding-left: 7%;
    padding-right: 7%;
    padding-left: 13%;
    padding-right: 13%;
    display: block;
    text-align: center;
    margin: 0 auto;
    font-family: MuseoSans;
    font-weight: 300;
    color: white;
    font-family: MuseoSans;
    font-weight: 100;
    color: white;
    font-style: italic;
    position: fixed;
    z-index: 2;
    height: auto;
    width: 100%;
    float: right;
.menu {
    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;

#block-system-navigation {
  float: right; 
  clear: both;

a {
     border: thick double #32a1ce; 

    position: fixed;
    bottom: 0px;



 * @file
 * Default theme implementation to display a single Drupal page.
 * The doctype, html, head and body tags are not in this template. Instead they
 * can be found in the html.tpl.php template in this directory.
 * Available variables:
 * General utility variables:
 * - $base_path: The base URL path of the Drupal installation. At the very
 *   least, this will always default to /.
 * - $directory: The directory the template is located in, e.g. modules/system
 *   or themes/bartik.
 * - $is_front: TRUE if the current page is the front page.
 * - $logged_in: TRUE if the user is registered and signed in.
 * - $is_admin: TRUE if the user has permission to access administration pages.
 * Site identity:
 * - $front_page: The URL of the front page. Use this instead of $base_path,
 *   when linking to the front page. This includes the language domain or
 *   prefix.
 * - $logo: The path to the logo image, as defined in theme configuration.
 * - $site_name: The name of the site, empty when display has been disabled
 *   in theme settings.
 * - $site_slogan: The slogan of the site, empty when display has been disabled
 *   in theme settings.
 * Navigation:
 * - $main_menu (array): An array containing the Main menu links for the
 *   site, if they have been configured.
 * - $secondary_menu (array): An array containing the Secondary menu links for
 *   the site, if they have been configured.
 * - $breadcrumb: The breadcrumb trail for the current page.
 * Page content (in order of occurrence in the default page.tpl.php):
 * - $title_prefix (array): An array containing additional output populated by
 *   modules, intended to be displayed in front of the main title tag that
 *   appears in the template.
 * - $title: The page title, for use in the actual HTML content.
 * - $title_suffix (array): An array containing additional output populated by
 *   modules, intended to be displayed after the main title tag that appears in
 *   the template.
 * - $messages: HTML for status and error messages. Should be displayed
 *   prominently.
 * - $tabs (array): Tabs linking to any sub-pages beneath the current page
 *   (e.g., the view and edit tabs when displaying a node).
 * - $action_links (array): Actions local to the page, such as 'Add menu' on the
 *   menu administration interface.
 * - $feed_icons: A string of all feed icons for the current page.
 * - $node: The node object, if there is an automatically-loaded node
 *   associated with the page, and the node ID is the second argument
 *   in the page's path (e.g. node/12345 and node/12345/revisions, but not
 *   comment/reply/12345).
 * Regions:
 * - $page['help']: Dynamic help text, mostly for admin pages.
 * - $page['highlighted']: Items for the highlighted content region.
 * - $page['content']: The main content of the current page.
 * - $page['sidebar_first']: Items for the first sidebar.
 * - $page['sidebar_second']: Items for the second sidebar.
 * - $page['header']: Items for the header region.
 * - $page['footer']: Items for the footer region.
 * @see template_preprocess()
 * @see template_preprocess_page()
 * @see template_process()
 * @see html.tpl.php
 * @ingroup themeable

  <div id="page-wrapper"><div id="page">

    <div id="header" class="clearfix"><div class="section clearfix">

      <?php if ($logo): ?>
        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
          <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
      <?php endif; ?>

      <?php if ($site_name || $site_slogan): ?>
        <div id="name-and-slogan">
          <?php if ($site_name): ?>
            <?php if ($title): ?>
              <div id="site-name"><strong>
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            <?php else: /* Use h1 when the content title is empty */ ?>
              <h1 id="site-name">
                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            <?php endif; ?>
          <?php endif; ?>

          <?php if ($site_slogan): ?>
            <div id="site-slogan"><?php print $site_slogan; ?></div>
          <?php endif; ?>
        </div> <!-- /#name-and-slogan -->
      <?php endif; ?>

      <?php print render($page['header']); ?>

    </div></div> <!-- /.section, /#header -->

    <?php if ($main_menu || $secondary_menu): ?>
      <div id="navigation"><div class="section">
        <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))); ?>
        <?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Secondary menu'))); ?>
      </div></div> <!-- /.section, /#navigation -->
    <?php endif; ?>

    <?php if ($breadcrumb): ?>
      <div id="breadcrumb"><?php print $breadcrumb; ?></div>
    <?php endif; ?>

    <?php print $messages; ?>

    <div id="main-wrapper"><div id="main" class="clearfix">

      <div id="content" class="column"><div class="section">
        <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
        <a id="main-content"></a>
        <?php print render($title_prefix); ?>
        <?php if ($title): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
        <?php print render($title_suffix); ?>
        <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
        <?php print render($page['help']); ?>
        <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
        <?php print render($page['content']); ?>
        <?php print $feed_icons; ?>
      </div></div> <!-- /.section, /#content -->

      <?php if ($page['sidebar_first']): ?>
        <div id="sidebar-first" class="column sidebar"><div class="section">
          <?php print render($page['sidebar_first']); ?>
        </div></div> <!-- /.section, /#sidebar-first -->
      <?php endif; ?>

      <?php if ($page['sidebar_second']): ?>
        <div id="sidebar-second" class="column sidebar"><div class="section">
          <?php print render($page['sidebar_second']); ?>
        </div></div> <!-- /.section, /#sidebar-second -->
      <?php endif; ?>

    </div></div> <!-- /#main, /#main-wrapper -->

    <div id="footer"><div class="section">
      <?php print render($page['footer']); ?>
    </div></div> <!-- /.section, /#footer -->

  </div></div> <!-- /#page, /#page-wrapper -->

  <!--<footer id="footer" class="footer">-->
  <!--  <a class="icon fb" href=""></a>-->
  <!--  <a class="icon tw" href=""></a>-->
  <!--  <p>Build by <a href="">Compucorp</a> on behalf of Open Charity</p>-->

Fixed position elements are removed from the page flow, other elements do not see them.

You would need to add some top padding to the content that follows in order to push it down.

Just add padding-top to the body that’s a bit more than the height of the header so the body will start below the header.

If your header is 100px height, try making the body {padding-top: 120px}

Or add <style=“padding-top:120px”> to the first element in the body content.

I think your time would be better spent learning some modern CSS layout methods that don’t require floats. That is an old theme your working from there, it has comments about IE6 positioning bugs.

Learn how to use display:table; display:flex; etc.


You must add padding to the top of the content portion of your page. The width of the padding (matches the height of the fixed header) is best calculated and applied by JavaScript. An alternative old school method is to create an exact copy of the fixed header at the top of the content and hide it. The “padding” at the top of the page will always match the height of the fixed header which can change with the user’s font-size, font-family, or viewport width.

Ditto @Ray.H’s recommendation about learning some modern layout methods.


Off topic, but it has to be said:

Please don’t, make it an absolute position instead. I for one find it very annoying when fixed things cover content and waste my viewport real estate.

An absolutely positioned header would start at the same position but would scroll up with the content. And as already suggested, add top padding to the page to push content below the header

(Because of the common misuse of fixed headers, I have a user.css that changes all top fixed things to absolut positioned. If I want the header, I just hit the keyboard’s home key.)


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.