1

Question Background:

I'm using Twitter Bootstrap on my site and have incorporated a collpasing navbar for my sites menu.

The Issue:

The NavBarcollapses to a button as expected but when the screen hits a certain width the logo I have within the NavBarand the menu items split onto two separate lines. The following shows the issue:

This is the navbar with the page fully expanded and working as desired:

enter image description here

This is with the page slightly minimized and response, notice the NavBar has now split into two lines. This is not the desired behavior I want. I ideally I want the option to stay on the same line or collapse to a button:

enter image description here

This shows the NavBar fully collapsed:

enter image description here

The Code:

This is my NavBar markup. I cannot see why I'm seeing the above unwanted behavior with the NavBarseparating into two lines:

<div class="navbar navbar-fixed-top">
    <nav class="navbar navbar-default" role="navigation" id="nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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">FM<b>FC</b></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#" class="scroll-link" data-id="Welcome">Welcome</a></li>
                    <li><a href="#" class="scroll-link" data-id="features">Club</a></li>
                    <li><a href="#" class="scroll-link" data-id="About">About Us</a></li>
                    <li><a href="#" class="scroll-link" data-id="Gallery">Gallery</a></li>
                    <li><a href="#" class="scroll-link" data-id="Committee">Committee</a></li>
                    <li><a href="#" class="scroll-link" data-id="Contact">Contact Us</a></li>
                    <li><a href="#" class="scroll-link" data-id="Location">Location</a></li>
                    <li><a href='@Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

Any help in working out this issue would be appreciated.

user1352057
  • 3,162
  • 9
  • 51
  • 117

2 Answers2

1

The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..

One option is to use the full width container-fluid (this may not work for your design): http://codeply.com/go/TfbwIivilI

Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best: http://codeply.com/go/kcaXYh7ARB

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

It happenes because you have so many li elements, so what you need is to change the collapse break point. Just add the following to your css

@media(max-width:992px) {
.nav>li>a {
    padding-left: 10px;
    padding-right:10px
    }
}

bootply.

Deja Vu
  • 721
  • 1
  • 8
  • 17