CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Miguel Morujão
Miguel Morujão

Reputation: 1161

Bootstrap navbar not displaying right in some devices

In some devices the collapsed navbar items are not being displayed correctly.

The are like this:

enter image description here

and should be like this:

enter image description here

Navbar code:

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
        <div class="navbar-header"><a class="navbar-brand" href="index.htm">Index</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="casameio.htm">casa do meio</a>
                </li>
                <li><a href="casabrava.htm">casa brava</a>
                </li>
                <li><a href="casavelha.htm">casa velha</a>
                </li>
                <li><a href="pool.htm">pool</a>
                </li>
                <li><a href="prijzen.htm">prijzen</a>
                </li>
                <li><a href="ons.htm">over ons</a>
                </li>
                <li><a href="activ.htm">activiteiten</a>
                </li>
                <li><a href="guestbook.htm">gastenboek</a>
                </li>
                <li><a href="omgeving.htm">kaartje</a>
                </li>
                <li><a href="contact.htm">contact</a>
                </li>
                <li><a href="links.htm">linken</a>
                </li>
            </ul>
        </div>
    </div>

Upvotes: 0

Views: 36

Answers (1)

Toaditoad
Toaditoad

Reputation: 304

Since I cannot comment on questions yet, I want to share my thoughts this way:

What devices (meaning which screen sizes) are you talking about? Without any CSS it is hard to say why you see this behavior. Can you provide a working sample?

Maybe that helps you:

Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

from http://getbootstrap.com/components/#navbar-default

Have you checked out the grid system and its media queries of bootstrap in general? (http://getbootstrap.com/css/#grid-media-queries)

Upvotes: 1

Related Questions