[SOLVED] Full-width header causing entire site to shift

I’m trying to add a big header on certain pages on my site above the normal content. However doing just about anything to it causes my entire site to shift to the left a bit. Including things that are before this code even appears, like the site’s logo and navigation menu. Here’s what I have:


     <?php if ( is_page( array('about', 'projects') ) || '8' == $post->post_parent ) { ?>
      <section id="big-header">
            <h1> <?php echo roots_title(); ?> </h1>
      <? } ?>
      <div class="wrap container" role="document">
        <div class="content row">
          <div class="main <?php echo roots_main_class(); ?>" role="main">
            <?php include roots_template_path(); ?>
          </div><!-- /.main -->
          <?php if (roots_display_sidebar()) : ?>
            <aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
              <?php include roots_sidebar_path(); ?>
            </aside><!-- /.sidebar -->
          <?php endif; ?>
        </div><!-- /.content -->
      </div><!-- /.wrap -->


    #big-header {
       background: #000;
       height: 460px;
       margin-top: -20px;
       margin-bottom: 20px;

rendered html:

        <section id="big-header">
            <h1> About </h1>
      <div class="wrap container" role="document">
        <div class="content row">
          <div class="main col-sm-12" role="main">
    <div class="page-header">
        About  </h1>
    </div>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id dolor sit amet mi ullamcorper iaculis. Fusce porta ornare est. Sed quis orci dolor. Duis eget arcu sed magna condimentum aliquet a posuere tortor. Aliquam eros elit, molestie in nisi non, ultrices rutrum tellus. Aliquam hendrerit ante quis diam ultrices, nec pulvinar enim bibendum. Praesent lectus libero, ullamcorper in dolor non, dictum semper arcu. Sed volutpat erat risus. Morbi non sapien ultricies justo convallis feugiat.</p>

Adding the margin or the height on the big header causes everything to shift to the left. Including things before the header like the navigation bar. I can’t figure out why or how to fix it. Since everything was shifting I assumed it was a grid issue but I can’t see what’s wrong here. I’ve been doing large headers on the Roots theme like this for a while and never had an issue like this.

Any ideas? Let me know if you need any more information to properly help.


EDIT: The PHP wasn’t appearing here? It looks right when I edit the post, but then when I save it it’s gone. Here’s a gist: https://gist.github.com/matthewlyle/7326110

EDIT 2: Now it is. But this thing won’t let me delete my original edit as it’s “too similar to my original post.”

Not exactly sure if this is your problem but for full-width and if you haven’t created a fluid container class it will cause your page shift. The older BS had container-fluid, 3.0 does not.

So when I want full-width sections I use this.

.container-fluid {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
width: 100%;

If you still need help on this, post a link to the working site and I’d be more than happy to take a look

@onemore2013 Thanks for the tip, but that wasn’t the cause of the issue.

@roryheaney It’s local. I’ll have to put it up somewhere later. I figured out a terrible hack to fix it which involved a -7px on the containers of pages with the large header if that helps trigger any ideas as to what could be happening.

yeah, with out being able to see it I can only make assumptions:

  • should make it: margin: 0 auto;
  • and if you have any items floating in there left or right you’ll want a div set to clear:both

Sorry I can only go off what I’ve seen so far.

Yeah no it’s not a float issue or a centering issue.

This is actually happening on a much more complicated site, but this as stripped down as I could go for troubleshooting purposes: http://matthewlyle.com/roots-issue/

Look at the about page and then any other page. The entire site is shifted on the about page. The only addition is that large header.


I had almost the same thing last time but I can’t remember how I did it though. I used this template as reference when I did this: http://startbootstrap.com/templates/business-casual/

The site I was working on was http://pinkmann.gopagoda.com/

It’s not a full-width but I think it’s basically the same thing because I kinda force a max-width on that pinkmann site’s width. I had my full-width head-scratching experience somewhere else involving bootstrap but it was not Roots it was on Shopify.

Keep us posted.


On the local version you are using what do you have in the big header?

There are a few things that seem to be adjusting the how this template shifts.

  • setting the height of big-header to auto the page shifts back to normal
  • adjusting the h1 margin-top after changing big header shifted the page back and forth

still trouble shooting and adjusting in chrome/ff to see what results im getting

@roryheaney A background image. Some pages have some text. Some pages don’t.

Yes removing the height and margin will fix it. Obviously that’s just a symptom, as a framework can’t be so volatile that adding a height or margin to an element can break the entire thing (including elements and containers that appear before it even appears.)

I hate bumping things but does anybody have any idea here? I’m very uncomfortable having these hacks in place to stop this from happening. This site seems incredibly volatile at the moment and I have no idea why. I even tried copying and pasting the full-width header I’ve used on other Roots-based websites (pre Bootstrap 3) and I’m still getting the shift unless I remove heights and random margins. Both of which I obviously need.

I’ve now discovered it is NOT the full width header.

Here’s the blog section with no template changes: http://matthewlyle.com/roots-issue/blog/

And here’s a post with comments with no template changes: http://matthewlyle.com/roots-issue/hello-world

As you can see, the single post is shifted.


Annnnd the fix: http://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page/7607206#7607206

Thanks Ben.