Menu doesn't expand when clicking on mobile view
For some reason, the menu icon doesn't expand in mobile mode, not sure what I did wrong. Can someone take a look at me, let me know? Thank you! http://10.60.53.115/staging/sijie/Monster_UX_bootstrap/index.html
HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<a href="#" class="navbar-brand"><img class="img-responsive" src="http://media.newjobs.com/homepage/images/Monster_UX/logo.png"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right hidden-xs">
<li role="presentation" class="active"><a href="#">About Us</a></li>
<li role="presentation"><a href="#projects">What We Do</a></li>
<li role="presentation"><a href="#join">Join the Team</a></li>
<li class="form">
<form class="search-container" action="//llamaswill.tumblr.com/search">
<input id="search-box" type="text" class="search-box" name="q" />
<label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label>
<input type="submit" id="search-submit"/>
</form>
</li>
</ul>
</div>
</div><!--end container-fluid-->
+3
source to share
1 answer
You have installed the IMG in the wrong section of the navbar. For the mobile menu to activate on click, you need to move the IMG link to the button class="navbar-toggle"
.
.navbar .navbar-header .navbar-toggle {
padding: 6px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<img src="http://placehold.it/40x20/000/000">
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">About Us <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">What We Do</a>
</li>
<li><a href="#">Join the Team</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
0
source to share