CODEWITHSUNDEEP
javascripthtml
Michele Giglioni
Michele Giglioni

Reputation: 339

Bootstrap navbar toggle button doens't work

I know there are some other posts on this subject and I checked many of the proposed solutions but I failed to understand exactly how I should modify the code. I have tried many times and failed both on HTML and JS.

<div class="mainmenu-area">
  <div class="container">
    <div class="row">
      <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 collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="Product1.html">Products</a></li>
          <li><a href="Categories.html">Categories</a></li>
          <li><a href="Contact.html">Contact us</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

The funny thing is that the toggle button seems to work on local but when hosted online it doens't. Can you please let me know how to fix it?

Michele

Upvotes: 0

Views: 71

Answers (1)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17600

Your problem is that you cant go to http from https. You need to change your bootsrap.js link to https

from

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

to

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

Upvotes: 1

Related Questions