CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
John Lehmann
John Lehmann

Reputation: 8225

Prevent navbar from wrapping prematurely

My Bootstrap 3.3.0 navbar wraps into two rows, apparently when width is less than @screen-md, even though there is plenty of space between left and right for it to shrink/use. How can I change it so that it doesn't wrap prematurely?

I've seen several questions asking about how to change the breakpoint for collapsing into a single column. I'm not asking about that, as my collapse is set to @screen-sm and I'm fine with that.

Right before the wrap. I can even insert another element on the right and it causes no problem. enter image description here

Right after: enter image description here

Here's my HTML:

<header class="navbar navbar-default navbar-static-top bs-docs-nav" id="top" role="banner">
  <form ...>
  <div class="container">
    <div class="navbar-header">
      ...
    </div>
    <nav id="mm-navbar" class="collapse navbar-collapse">
        <!-- Free-text Search --> 
        <div class="text-search input-group">
            <input id="search-input" type="text" class="form-control"
                placeholder="Search" name="q"  value="{{ query }}" />
            <span class="input-group-btn">
              ...
            </span>
        </div><!-- /text search -->

        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
               ...
            </li>
            <li><a href="{% url 'wizard' %}">Calculate</a></li>
            <li class="dropdown">
               ...
            </li>

            <li> <a id="login_button" href="{% url 'account_login' %}">Login</a> </li>
            <li>
                <span class="fa feedback-button fa-envelope" data-toggle="modal" 
                    data-target="#feedback-modal" title="Send Feedback"></span>
            </li>
            <li>
                <span class="help-button glyphicon help glyphicon-question-sign" data-toggle="modal" 
                    data-target="#help-modal" title="Help"/>
            </li>
            </ul>
        <!-- Advanced Search --> 
        <div class="collapse" id="advanced-search-bar">
            {% include "search.html" %}
        </div>
    </nav>
  </div>
  </form>
</header>

This question seemed related but pull-left and pull-right did not work for me.

Upvotes: 2

Views: 2041

Answers (1)

John Lehmann
John Lehmann

Reputation: 8225

Note the wrap introduced at < 992px (moving from screen-md into screen-sm), is accompanied by a large amount of margin on either side of the broken navbars (pic 2 above). The problem is that this entire navbar is wrapped in .container, which at this breakpoint sets a fixed width which the navbar can no longer fit into.

The solution is to use a .container-fluid instead (or no container, although I'm not sure of the ramifications of that).

Upvotes: 2

Related Questions