How to create a fixed width, fixed position header in Bootstrap

The default fixed-top navbar in Bootstrap spans the full width of the viewport. I want to contain it within a container div. I am able to contain the left side using the following CSS override:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  width:100%;
 right: auto;
  left: auto;
  z-index: 1030;
}


But the navbar still extends full window on the right.  Giving a definite width to the navbar does work, but it destroys the menu collapse.  

Any help would be greatly appreciated.
dlearman1Asked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
You need to physically move the <nav> block from the top of the markup and paste it into the first content container.

Instead of this:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
...
</nav>
<div class="container theme-showcase" role="main">
...
</div>

You need this:
<div class="container theme-showcase" role="main">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    ...
    </nav>
...
</div>

Then, for this css definition, change to:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  z-index: 1030;
}

You will also need to remove the padding from this definition:

.container {
    margin-left: auto;
    margin-right: auto;
   /* padding-left: 15px;
    padding-right: 15px;*/
}

...and add it to this definition:

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-left: 0;
    margin-right: 0;
    padding: 0 15px;
}

Then you will need to add a media query to get the menu width back to 100% width for small screens.

@media only screen and (min-width: 319px) and (max-width: 770px) {
    .navbar-fixed-top,
    .navbar-fixed-bottom {
       width:100%
    }
}
0
 
dlearman1Author Commented:
Hi Mandeep,

Thanks for the comment.  The demo is for a full-width layout which isn't what I want.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.