CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user3968645
user3968645

Reputation: 135

Bootstrap Navbar Fixed to Top

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.

Upvotes: 0

Views: 333

Answers (4)

Raphael Serota
Raphael Serota

Reputation: 2197

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

Upvotes: 1

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

use this

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

or add class container for nav bar

Upvotes: 0

Ben Temple-Heald
Ben Temple-Heald

Reputation: 708

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">

Upvotes: 0

wouldnt
wouldnt

Reputation: 622

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.

Upvotes: 0

Related Questions