CODEWITHSUNDEEP
csstwitter-bootstrap-3
JavaCake
JavaCake

Reputation: 4115

Collapsed menu items are not 100% in width with Bootstrap 3

Using bootstrap navbar i am not able to make the menu items in collapsed mode become 100%. For some reason there is a margin on one side of the menu items.

Fiddle: http://jsfiddle.net/yudcbv7n/

<div class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand navbar-header-brand-collapsed" href="#"><i class="fa fa-bus"></i> Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav nav-justified">
         <a class="navbar-brand navbar-brand-collapsed" href="#"><i class="fa fa-bus"></i> Project name</a>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

And some CSS:

@media (min-width: 767px) {
    .navbar-nav.nav-justified > li{
        float:none;
    }           
    .navbar-header-brand-collapsed {
        display:none;
    }
}

@media (max-width: 767px) {
    .navbar-header-brand-collapsed {
        display:block;
    }
    .navbar-brand-collapsed {
        display:none;
    }
}

Upvotes: 1

Views: 2854

Answers (2)

Suganth G
Suganth G

Reputation: 5156

Try this:

FIDDLE DEMO

BOOTPLY DEMO

Use text-center instead of nav-justified

  <ul class="nav navbar-nav text-center">

Upvotes: 0

Mark Nugent
Mark Nugent

Reputation: 3675

The culprit seems to be the .nav-justified class. It seems that it is (confusingly) not meant for use with the navigation bar (.navbar).

If you look at the Bootstrap documentation, it mentions how to use .nav-justified with the class .nav using tabs and pills, but not with .navbar.

I would suggest that you remove the .nav-justified class. That will get your collapsed menu items to take up the full width.

Upvotes: 1

Related Questions