CODEWITHSUNDEEP
csstwitter-bootstrap-3fixed
yes_in
yes_in

Reputation: 11

Fixed header with bootstrap 3

I want to make the whole header of a page fixed it will contain logo, nav and social links when I add the fixed position rule it stacks behind the body sections and floats left out of the container please see this code and see if you can help: http://www.bootply.com/tbfqTASyp5

Upvotes: 0

Views: 7493

Answers (1)

Shawn Taylor
Shawn Taylor

Reputation: 15740

You should definitely read, or re-read the bootstrap documentation as this is all built-in functionality: http://getbootstrap.com/components/#navbar.

That being said, here is the out-of-the-box code that gets you most of the way there:

<div class="navbar navbar-default navbar-fixed-top container">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">
      <img src="http://placehold.it/60x35">
    </a>
    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
  </div>
  <div class="navbar-collapse collapse navbar-right">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Blog</a></li>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Contact Me</a></li>
  </ul>
</div>

And a bootply fixing your example: http://www.bootply.com/WLVUWn8xN0

Upvotes: 1

Related Questions