CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
joostmakaay
joostmakaay

Reputation: 437

Bootstrap navbar is always collapsed

Im using Twitter Bootstrap 3 for my HTML site, but the navigation is always collapsed. It looks very bad when i open it in my normal browser, on my mobile-phone it looks good. How can not make the navigation bar collapsing by default?

<div class="navbar navbar-inverse navbar-fixtop" role="navigation">
        <div class="container">
          <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>   
<!--              Hierin wordt het logo van de site weergeven, de tekst is te vervangen door een plaatje als dat gewenst is.-->
            <a class="navbar-brand" href="#"></a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
<!--          Hierin worden de menu items opgehaald die je hierboven benoemt hebt, ook wordt er active toegevoegt aan het geselecteerde linkje.-->         
               <li class="">
                  <a href="index.html">Hoofdmenu</a>
                  <a href="beschikbaarheid.html">Mijn Beschikbaarheid</a>
                  <a href="zorgvragen.html">Openstaande Zorgvragen</a>
                  <a href="inschrijvingen.html">Mijn inschrijvingen</a>
                  <a href="careassist.html">Mijn Care Assists</a>
               </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
    </div>

In the following link is my code;

http://pastebin.com/hApriu50

Upvotes: 2

Views: 3161

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

The navbar-nav markup is incorrect. It should look like..

     <ul class="nav navbar-nav">
           <li class=""><a href="index.html">Hoofdmenu</a></li>
           <li><a href="beschikbaarheid.html">Mijn Beschikbaarheid</a></li>
           <li><a href="zorgvragen.html">Openstaande Zorgvragen</a></li>
           <li><a href="inschrijvingen.html">Mijn inschrijvingen</a></li>
           <li><a href="careassist.html">Mijn Care Assists</a></li>
     </ul>

Bootply

Upvotes: 1

Nikhil N
Nikhil N

Reputation: 4577

You have put all of your links under single li which is wrong. Try following code.

Demo Fiddle

<div class="navbar navbar-inverse navbar-fixtop" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
        <!-- Hierin wordt het logo van de site weergeven, de tekst is te vervangen door een plaatje als dat gewenst is.--> <a class="navbar-brand" href="#">Standby Thuiszorg</a>

    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <!-- Hierin worden de menu items opgehaald die je hierboven benoemt hebt, ook wordt er active toegevoegt aan het geselecteerde linkje.-->
            <li class=""><a href="index.html">Hoofdmenu</a>
            </li>
            <li><a href="beschikbaarheid.html">Mijn Beschikbaarheid</a>
            </li>
            <li><a href="zorgvragen.html">Openstaande Zorgvragen</a>
            </li>
            <li><a href="inschrijvingen.html">Mijn inschrijvingen</a>
            </li>
            <li><a href="careassist.html">Mijn Care Assists</a>
            </li>
        </ul>
    </div>
    <!--/.nav-collapse -->
</div>

Upvotes: 1

Related Questions