CODEWITHSUNDEEP
csstwitter-bootstrapmobilenavbar
Nicola Sansom
Nicola Sansom

Reputation: 129

Bootstrap default navbar is not collapsed in mobile view

So I am new to bootstrap and can't seem to find a solution to fix my problem which is when the mobile view the menu is open when I want it to be collapsed by default.

<div class="navbar navbar-default navbar-fixed-top" 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">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
       </button>

      </div>
      <div class="navbar-collapse collpase">
      <ul class="nav navbar-nav navbar-left">
          <li><a href="#">Home</a></li>
          <li><a href="#">News & Events</a></li>
          <li class="dropdown">
          <a href="#" class ="dropdown-toggle" data-toggle="dropdown">Things to do<b class="caret"></b></a>
        <ul class="dropdown-menu">
              <li><a href="#">Leisure</a></li>
              <li><a href="#">Groups & Activities </a></li>
              <li></li>    
              </ul>      

          </li>
           <li class="dropdown">
          <a href="#" class ="dropdown-toggle" data-toggle="dropdown">Services<b class="caret"></b></a>
        <ul class="dropdown-menu">
              <li><a href="#">Education & Learning</a></li>
              <li><a href="#">Personal Care</a></li>
              <li><a href="#">Police</a></li>
              <li></li>    
              </ul>      

          </li>
          <li><a href="#">Businesses</a></li>
          <li><a href="#">History</a></li>
          <li><a href="#">Discussion Forum</a></li>



          </ul>

      </div>
   </div>
  </div>

Example screenshot

Upvotes: 3

Views: 14826

Answers (3)

user4689071
user4689071

Reputation:

It's a JQuery issue.Check wether the JQuery is included correctly or not.

Upvotes: 2

Aukhan
Aukhan

Reputation: 481

Typo in code

<div class="navbar-collapse collpase">

check spelling for collapse

Upvotes: 3

David Wilkinson
David Wilkinson

Reputation: 5118

You have the wrong class in the wrapping <div> of the dropdown, should be as follows (there's a typo in yours - "collpase"):

<div class="collapse navbar-collapse">

https://jsfiddle.net/2y9edmk1/

Upvotes: 3

Related Questions