Why is my navbar menu cut off?
Question
I've been given a web site to modify, which was built using Bootstrap v3.3.7. It includes a navbar (HTML below) which looks fine. However, I need to add a dropdown item to the navbar, which I did following the instructions on the Bootstrap page . The HTML is basically the same as I've used elsewhere without problems.
However, when I click on the dropdown in this case, the menu is cut off...
You can just see the top of the first item in the menu, but nothing more.
Anyone able to explain why this is happening? Here is the HTML for the navbar...
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="site-title">
<h3>My web site</h3>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="col-md-8 col-sm-8 navbar-style">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="...">Link 1</a></li>
<li><a href="...">Link 2</a></li>
<li><a href="...">Link 3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Colours <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">abc</a></li>
<li><a href="#">def</a></li>
<li><a href="#">ghi</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
2 answers
solution1
1 2017-02-09 18:02:33
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <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> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="site-title"> <h3>My web site</h3> </div> </div> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="col-md-8 col-sm-8 navbar-style"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="...">Link 1</a></li> <li><a href="...">Link 2</a></li> <li><a href="...">Link 3</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Colours <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">abc</a></li> <li><a href="#">def</a></li> <li><a href="#">ghi</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div> </body> </html>
For me it works fine . check out above snippet. I think it's a cdn problem. you might have included it twice in your page.
solution2
1 ACCPTED 2017-02-09 18:11:29
I can't comment yet so I'll put my comment here with suggestion
neophyte shows that the code is working fine.. check your css style if you have overflow: hidden or something on your header
I'm not sure if the black background is part of your edit with menu cut off here if not, then your header has overflow
show us your css style too
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.