Bootstrap Navbar Fixed to Top

Question

Okay so I have a standard navbar from Bootstrap inside a container that is also styled by bootstrap.

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
       <!-- Nav Bar Goes On From Here. Only Posted this as an examlpe -->

Now, when I added the navbar-fixed-top class to the navbar, it came out of the container and fills from left to right on the screen. I realize this is default behavior for Bootstrap but how can I have it maintain the width of the container? And do it in a way that is responsive.

Answer 1

container-fluid is supposed to be full-width, according to bootstrap docs. If you change it to another container , does that help?

Answer 2

use this

@media (min-width: 1200px) {
    .navbar {
        position: fixed !important;
        top: 0px;
        width: 940px;
    }
}

or add class container for nav bar

Answer 3

The css for .navbar-fixed-top is pretty straight forward:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  border-width: 0 0 1px;
}

plus

.navbar-fixed-top {
  top: 0;
}

(I think that's what the stock version has.)

If you want it pinned to the top but don't want it to be full width, then you really don't want navbar-fixed-top. You just want to add something like "top:0" to your style/class for your navbar.

Answer 4

If you add container to the < nav />

You get the following : http://jsfiddle.net/bo9jgpk2/

<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">