CODEWITHSUNDEEP
htmltwitter-bootstrap
Aaron Martin
Aaron Martin

Reputation: 128

Bootstrap burger nav menu not opening in mobile browser

I'm using bootstrap stylesheets.

The following code is for my navigation panel. This works fine on my desktop browser but when I reduce the browser size or test on a mobile device, the burger menu appears but does not expand to display the contents of the navigation as expected. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

<body>
  <nav 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="#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 color-me" href="#home">Home</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about-me">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="##">Page 1</a></li>
          <li><a href="##">Page 2</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
    <!-- container -->
  </nav>

Am I missing something in my HTML? I don't understand where the problem is!

Upvotes: 0

Views: 294

Answers (3)

Pravin Poudel
Pravin Poudel

Reputation: 1540

please include this line and will work .

Note: Include in this order - include Jquery before Bootstrap.Bootstrap need Jquery to be loaded before Bootstrap.

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

you are missing the javascript library so that the event isnot responded ,

Upvotes: 1

Ashish Dhakal
Ashish Dhakal

Reputation: 21

I guess using the bootstrap.min.js for the issues won't solve the problem until and unless you do not include the jquery in bootstrap@3

please also include the following link or get it through dist folder of javascript

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

Upvotes: 1

Khoi Ngo Nguyen
Khoi Ngo Nguyen

Reputation: 174

Seem that you missed include bootstrap js file. Please check https://getbootstrap.com/docs/3.3/getting-started/

Upvotes: 1

Related Questions