Bootstrap- Navbars menu items not visible when clicking hamburger icon

1
votes

I appreciate all the help I can get :)

I'm trying to do a collapsable navbar with Bootstrap 3.3.7 with a hamburger icon on smaller viewports.

I can't get the hamburger icon to work. I've managed to make a hamburger icon which is visible only on smaller viewports but when I click the hamburger icon it doesn't show the menu items that it should contain.

How can I make the hamburger icon work?

Here is the code for the navigation bar:

<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-inverse">
  <div class="container">   <!-- Creates margins for the navbar content on left and right -->


      <!-- Home icon -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target:"#mainNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-home"></span></a>
    </div>


     <!--  Menu items  -->
     <div class="collapse navbar-collapse" id="mainNavbar">
       <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
     </div>

  </div>
</nav>
2
htmltwitter-bootstrap-3
have u added the bootstrap js file ? - Matee Gojra
Yes I have. I've copied the basic template from Bootstraps website and there are both jquery and js scripts included. - MiinaK
If this is your real code replace your typo data-target:"#mainNavbar" with data-target="#mainNavbar". Seems to work just fine now. - ZZ-bb
Hey that's why it didn't work! Thank you! I missed the typo. - MiinaK

2 Answers

1
votes

Try this snippet... taken from w3schools... simple and cool.. dont forget to add bootstrap JS file

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
    </div>
  </div>
</nav>
0
votes

You need to include the bootstrap js cdn within your head tags and making sure you have the latest version of jQuery.

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

Keep in mind, you need to load the jQuery before loading in Bootstrap.

Here is a working fiddle: https://jsfiddle.net/hkLfx6u8/16/