CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Bootstrap hamburger menu not working

For some reason my bootstrap hamburger menu is acting up. The menu shows up just fine when on a small screen but the menu does not expand when clicked.

I went ahead and added the full code to see if that helps.

Here is my code:

<!DOCTYPE html>
<html> 
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<head> 

<title> TopMusicFestivals </title>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Connecting CSS-->
<link rel= "stylesheet" href = "/stylesheets/main.css">

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



</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#collapse1" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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" href="/">TMF</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse" data-target="#collapse1">
         <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
        <ul class="nav navbar-nav navbar-right"> 

        <!--The if statemnet below along with the currentUser varriable is how we're passing the user name into the navbar-->
       <% if(!currentUser){ %>
        <li> <a href="/login"> Login </a></li>
        <li> <a href="/register"> Sign Up </a></li>
      <% } else{ %>
        <li> <a href ="#">Signed In As: <%= currentUser.username%> </a></li>
        <li> <a href="/logout"> Log Out </a></li>
     <%  } %>
            </ul>
        </div>
    </div>
</nav>


<!--==============-->

Upvotes: 2

Views: 3859

Answers (1)

GoMega54
GoMega54

Reputation: 148

If the hamberger menu is showing up on smaller screens, but not expanding, it could be that the bootstrap JS and JQuery files are not loading correctly. Just add the following scripts to you code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Upvotes: 2

Related Questions