Bootstrap based Navigation along with dropdown support to show evenly spaced nav using full width

Question

Trying to use bootstrap to design a top navigation layout and I see that it defaults to left align. how do I get it to use full width of top?

Current https://jsfiddle.net/v2notb5n/

    <nav class="navbar">

<div class="fluid-container">
<ul class="nav navbar-nav navbar-inverse">
<li class="nav_page active"><a href="#" class="nav_txt"> Home</a> </li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" class="nav_txt"> Team <span class="caret"></span></a></li>
<ul class="dropdown-menu">
                        <li><a href="#">National</a></li>
                        <li><a href="#">Geo</a></li>
                        <li><a href="#">Team Pictures</a></li>
                  </ul>
<li> <a href="#" class="nav_txt">About us</a> </li>
</ul>
</div>

</nav>

Expected result: https://i.stack.imgur.com/7h8th.jpg

I tried something similar I found here Bootstrap navbar justify / span menu items occupying full width

but that didn't work for me.

Updated based on suggestions and answer here: https://jsfiddle.net/uahwra75/1/

Answer 1

To have the navbar stretch the full width, simply overwrite the float: left on .navbar-nav for medium screen widths and higher, with:

@media screen and (min-width: 768px) {
  .navbar-nav {
    float: none;
  }
}

I've created a working fiddle showcasing this here.

Also note that you have incorrectly used the class fluid-container instead of container-fluid, which will affect your padding. I've corrected that in the fiddle abopve, and the snippet below:

@media screen and (min-width: 768px) {
  .navbar-nav {
    float: none !important; /* StackSnippets require more specificity */
  }
  .navbar-nav li {
    width: calc(100% / 3);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-inverse">
      <li class="nav_page active">
        <a href="#" class="nav_txt"> Home</a>
      </li>
      <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">National</a></li>
          <li><a href="#">Geo</a></li>
          <li><a href="#">Team Pictures</a></li>
        </ul>
      </li>
      <li><a href="#" class="nav_txt">About us</a></li>
    </ul>
  </div>
</nav>

EDIT

To additionally ensure that the titles are centralised, you're looking to add a width to .navbar-nav li that is 100% divided by the number of columns. COnsidering you have three columns, you divide by three:

.navbar-nav li {
  width: calc(100% / 3);
}

Note that like the removal of the float, this should go inside of the media query.

I've created a new fiddle showcasing this here.

Hope this helps! :)