Elements not contained within container element

Question

On my website (made with bootstrap), my navbar is embedded within a container .boxed #wrapper that has a max width of 800px (see first picture).

The issue occurs with the fixed navigation menu (which is visible when users scroll down the page).

It seems that with the fixed menu, the menu items and logo are no longer embedded within the container (which has a max width of 800px). The result is that the logo is now on the far left of the viewport, and the menu items are on the far right no matter what the size of the screen is, which looks very odd on wide screens.

I'd like my menu items and logo to have the position on the initial static menu and on the fixed menu, like on this website.

How can I fix this?

See https://jsfiddle.net/cLt3pdzL/4/

initial position:

after scroll down:

<div id="nav" class="container-fluid">
  <nav class="navbar-classic">
    <li><a href="index.html" class="active">Who are we? </a>
      <ul class="dropdown">
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
      </ul>
    </li>
    <li><a href="#">Services Services Services</a>
    </li>

  </nav>
          <a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a>
</div>

Answer 1

Here is my solution. I have created a div, which is invisible unless the scroll bar reached the 230px, as a background of navbar:

HTML:

    <div id="nav" class="container-fluid">
      <nav class="navbar-classic">
        <li><a href="index.html" class="active">Who are we? </a>
          <ul class="dropdown">
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
          </ul>
        </li>
        <li><a href="#">Services Services Services</a></li>
      </nav>
      <a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a>
    </div>
    <!-- End Menu Container -->

CSS:

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 800px;
    height: 70px;
    background: #fff;
    z-index: 10;
    opacity: 0.9;
    margin: 0 0 0 -10px;
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
    padding: 0 25px;
}

#nav.affix > .navbar-classic {
    height: 70px;
}

#nav.affix > .navbar-classic li {
    padding: 22px 5px 0;
}

#hidden-header-bg{
    width: 100%;
    height: 70px;
    top: 0;
    left: 0;
    background: #fff;
    display: none;
    position: fixed;
    z-index: 9;
}

.visible{
    display: block!important;
}

and JS:

  $( document ).ready(function() {
    $(window).scroll(function(){
      scrollTop = $(window).scrollTop();
      if(scrollTop > 280){
        $('#nav').addClass('affix');
        $('#hidden-header-bg').addClass('visible');
      }else{
        $('#nav').removeClass('affix');
        $('#hidden-header-bg').removeClass('visible');
      }
    });
  });

Here is the link of my solution: https://jsfiddle.net/cLt3pdzL/8/

Answer 2

Try adding the following code in your style

#nav.affix {
  margin: 0px 50px;
  width: auto !important;
}

You may notice here that I have overwritten the style for #nav.affix to have its margin-left and margin-right to be 50px which is equal to padding applied to body and also set its width to be auto. I hope it will help you. Here is the working fiddle.

UPDATE:

This update fiddle may help you with the changes you made. It is better you use a div for fixing and use another inner div element to align it the way you want.

Note: you were using <li> inside <nav>. I changed the <nav> to <ul>. Using <li> inside any other tags except <ul> and <ol> is not W3C valid.

I have changed the following code snippet::

<!-- Beg Menu Container -->
    <div id="nav" class="container-fluid">
      <div class="nav-wrap">
           <ul class="navbar-classic">
              <li><a href="index.html" class="active">Who are we? </a>
                 <ul class="dropdown">
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                 </ul>
              </li>
              <li><a href="#">Services Services Services</a>
              </li>

            </ul>
            <a href="#" class=""><img alt="" src="http://placehold.it/220x70" class=""></a>

      </div>

Add following css style:

.nav-wrap {
   width:100%;
   max-width:800px;
   margin:0px auto;
}

And AND IGNORE MY PREVIOUS STYLE

Answer 3

You are going to laugh, but in both Chrome and Firefox the navbar displays correctly upon scrolling in your jsfiddle example.

One thing I noticed though is that your affix css is missing the padding of the navbar-classic:

padding: 37px 5px 0;