5

I'm working with Twitter Bootstrap and the regular navbar you see in the guides: http://twitter.github.io/bootstrap/components.html#navbar

I don't want the navigation to stretch all the way left or right but stay where I can see both sides just like in the guide. The only difference is it would be fixed to the top.

I was wondering, how do I make this become a fixed navbar as if I was using the navbar-fixed-top class?

Jryl
  • 1,156
  • 4
  • 11
  • 20

4 Answers4

13

You should be able to do:

<div class="navbar-fixed-top container">
  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">Title</a>
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</div>
JasonM
  • 751
  • 6
  • 9
4

Bootstrap 4, use .container inside nav:

Demo

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
 <div class="container">
  <a class="navbar-brand site-title" href="#">Hello World</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHelloWorld" aria-controls="navbarHelloWorld" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarHelloWorld">
   <ul id="menu-top-menu" class="navbar-nav mr-auto">
    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
    <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
   </ul>
   <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" placeholder="Search" type="text">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
  </div>
 </div>
</nav>
Nabil Kadimi
  • 10,078
  • 2
  • 51
  • 58
0

For Bootstrap 4 it's sticky-top instead of navbar-fixed-top. My code looks like this:

<nav class="navbar sticky-top navbar-light"> <!-- <<< HERE -->
  <a href="/" class="logo1"></a>

  <div class="collapse navbar-collapse justify-content-end">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Product</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link" href="#">About</a>
    </div>
  </div>
</nav>
Roman Pushkin
  • 5,639
  • 3
  • 40
  • 58
  • Question was about keeping navbar content inside container, not about different types of sticking it to the top :p – Sharak May 19 '19 at 09:43
0

Use fixed-top before <nav></nav> tags.

<div class="fixed-top">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        ...more tags...
    </nav>
</div>
Jeison Araya Mena
  • 1