Bootstrap: Fixed div flows outside container

Question

I'm having a problem where inside my header I have a div that I want to be fixed at the top as the user scrolls. However when I set position:fixed to the element it escapes the parent .container on the right side yet retains the padding on the left side.I am completely lost on this... Any advice would be greatly appreciated thanks!

HTML

<header class='banner'>
  <div class="container">
    <div class='row'>
      <div class='col-md-12'>
        <div class='site-header'>
          <div class='fixed-head'>
            <div class='site-nav col-md-5 col-sm-7 col-xs-12'>
              <div class='row'>
                <div class='logo col-md-7 col-sm-7 col-xs-9'>
                  <h1>Lend Lease <span>Love it!</span></h1>
                </div>
                <ul class='region-select col-md-5 col-sm-4 col-xs-3'>
                  <li>
                      NSW <span class='glyphicon glyphicon-chevron-down'></span>
                  </li>
                </ul>
              </div>
              <div class='row'>
                <ul class='regions'>
                  <li>
                    QLD
                  </li><li>
                    SA
                  </li><li>
                    WA
                  </li><li>
                    VIC
                  </li><li>
                    ACT
                  </li>
                </ul>
              </div>
            </div>
            <div class='register col-md-3 col-sm-5 col-xs-12 pull-right'>
              <a href="#">Register for Updates <img src="<?php echo get_template_directory_uri(); ?>/assets/img/pencil.png"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

CSS

.banner {
   .site-header {
      background: url(http://placehold.it/1140x500&text=Header+Image);
      background-position: center;
      height: 500px;
      position: relative;


      .fixed-head {
         position: fixed;
         width: 100%;
         z-index: 99999;
      }

      .site-nav {
         background: @blue;

         h1 {
            margin: 0;
            color: #fff;
            font-size: 18pt;
            padding: 15px 0px;
         }

         span {
            font-size: 14pt;
         }

         ul.region-select {
            margin: 0;
            padding: 0;
            font-size: 0;
            text-align: right;
            float: right;
            li {
               display: inline-block;
               color: #fff;
               padding: 15px 30px;
               line-height: 2em;
               background: @orange;
               margin: 0;
               font-size: 12pt;

               span {
                  font-size: 10pt;
               }
            }

            .navicon {
               text-rendering: geometricPrecision;
               padding: 15px 10px;
            }
         }

         ul.regions {
            display: none;
            margin: 0;
            padding: 0;
            li {
               display: inline-block;
               background: #fff;
               width: 20%;
               text-align: center;
               padding: 15px;
               border-right: 1px solid @tan;

               &:last-child {
                  border: none;
               }
            }
         }
      }

      .register {
         background: @blue;
         padding: 15px 0px;
         font-size: 12pt;
         text-align: center;

         a {
            color: #fff;
            font-size: 12pt;
            line-height: 2em;
         }

         img {
            padding: 0 10px;
            padding-bottom: 2px;
         }
      }
   }
}

Screenshot: https://www.dropbox.com/s/pg9mlzz4f7aelo9/Screenshot%202014-01-03%2015.47.16.png

Can you create a js fiddle if possible or provide a link for testing — Raunak Kathuria, Jan 03 '14 at 06:05
`FIXED` element can't be re-positioned relative to its parent. — Anup, Jan 03 '14 at 06:14
Check this 1 http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container — Anup, Jan 03 '14 at 06:15

score 1 · Accepted Answer · answered Jan 03 '14 at 07:39

Position fixed elements does not care about parent positioning and box models. Hence given width 100%; to fixed element and not having left/right declared is causing the issue.

You also can not put fixed (hard code) value for left/right in this case. You have to take your containers left offset position and right offset position, then apply accordingly.

JS needed.

var leftPos = $(".site-header").offset().left  + "px";
$(".fixed-head").css({left: leftPos, right: leftPos});

Here leftPos value can be shared for both left/right of the fixed element. Because the container or your .site-header is always gonna be in center, means left space and right spaces would be equal.

Now you can get rid of width:100% from .fixed-head.

Bootstrap: Fixed div flows outside container

1 Answers1