CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3navbar
Ahmed-Anas
Ahmed-Anas

Reputation: 5619

Bootstrap nav menu going to new line

I'm working on a website with a rather big logo and large menu.

Problem is the bootstrap menu items (with the <a> tags and menu items) go to a new line when the page width is reduced EVEN THOUGH there is empty space which it can occupy.

Can someone explain why this happens?

Note:

  1. at viewport width 996px, logo and menu are on same line AND there is enough space on the right
  2. at viewport width 986px, menu now goes to the second line even though (I think) it should have occupied the space to the right

Sample js-fiddle:

https://jsfiddle.net/ahmed_anas/oq09gksL/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse" style="
    /* float: right; */
    /* width: 0px; */
">
          <ul class="nav navbar-nav">
            
  <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
  <li class="active"><a href="#">Home</a></li><li class="active"><a href="#">Home</a></li>
            
            <li><a href="#about">About</a></li><li><a href="#about">About</a></li>
            
            <li><a href="#contact">Contact</a></li><li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Upvotes: 1

Views: 4534

Answers (1)

vjain27
vjain27

Reputation: 3674

I think this is because of the media query on the container div which forces it to have a width of 750px when the viewport width is less than 992px. In chrome inspector you can see the media queries as following:

@media (min-width: 992px)
.container {
    width: 970px;
}
@media (min-width: 768px)
.container {
    width: 750px;
}

Upvotes: 1

Related Questions