13

I am using Bootstrap 4.

How do I make a navbar like the SO navbar?

With the content aligned like a "container" but the width of a "container-fluid" in bootstrap 4?

I want the width of the "fixed-top" navbar setting without it being fixed-top and the navbar content in a "container".

I would provide an example but I'm trying to make something exactly like the navbar at the top of this page.

bbennett36
  • 6,065
  • 10
  • 20
  • 37

5 Answers5

33

I was able to get the menu to 100% width

<ul class="navbar-nav nav-fill w-100">
  <li class="nav-item">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Contact</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">About</a>
  </li>
</ul>

using nav-fill w-100 with Bootstrap 4

Ravi Ram
  • 24,078
  • 21
  • 82
  • 113
15

Wrap an element around the .container element.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

#primary-nav {
  background-color: skyblue;
}
<div id="primary-nav">

  <div class="container">
  
    <ul class="nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Contact</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">About</a>
      </li>
    </ul>    
    
  </div>
  
</div>
hungerstar
  • 21,206
  • 6
  • 50
  • 59
14

I had met this issue also. I solved by put the <nav>...</nav> outside the <div class='container'>...</div> or <div class='container-fluid'>...</div>.

Vandy Sodanheang
  • 170
  • 3
  • 8
0

I tried the answer from @ravi.ram but it did not work for me. Here is how my code starts. Note the nav is outside the container. Solution is below the code.

<nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="index.html">
              <img src="images/logo.jpg">
            </a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto mr-auto">

Here are few ways that worked.

  1. If you want to keep container then you can use inline style like this. <div class="container" style="max-width:100%;"> This is because the container has a max-width set to 1140px.

  2. Use container-fluid instead of container

  3. Dont use the container at all. Remove the div completely.

Also see https://codepen.io/nishitmistry/pen/VwwozwL

Umair
  • 638
  • 1
  • 5
  • 11
0

you can try by just changing nav class to class="navbar navbar navbar-expand-md navbar-light fixed-top", you will get full width navbar.

Harsh Kumar Singh
  • 1
  • 2