Bootstrap Navbar-Collapse Not Working
Question
I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. Please helps.
The following is my HTML :
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <title>@ViewBag.Title - OTANI TIRE CO., LTD.</title> <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery")"></script> <script src="@Url.Content("~/Scripts/bootstrap")"></script> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <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> <ul class="nav navbar-nav"> <li> <a href="@Url.Action("Index", "Home")" title="Index" class="links"> <img alt="Index" src="@Url.Content("~/Content/Logo-Otani-3D_H2.png")"> </a> </li> </ul> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("New Arrivals", "NewArrivals", "Home")</li> <li>@Html.ActionLink("Brochure", "Brochure1", "Home")</li> <li>@Html.ActionLink("Awards", "Awards", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <br> <br> <br> <br> <hr /> <footer> <p>© @DateTime.Now.Year - OTANI TIRE CO., LTD. - ALL RIGHTS RESERVED.</p> </footer> </div> <script src="Scripts/jquery-1.10.2.js"></script> <script src="Scripts/bootstrap.js"></script> </body> </html>
1 answers
solution1
0 ACCPTED 2016-03-15 08:46:47
First Add the class navbar-brand to your logo. Its span was blocking the dropdown button
<a href="@Url.Action("Index", "Home")" title="Index" class="links navbar-brand">
<img alt="Index" src="@Url.Content("~/Content/Logo-Otani-3D_H2.png")">
</a>
and make sure your the Javascript files are loaded
details here https://plnkr.co/edit/J8XEdyzVvtCIoguNOLVc
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.
Related Question
Navbar-collapse not working - Bootstrap + Github
Bootstrap navbar-collapse button not working
Bootstrap navbar, full height navbar-collapse but with weird animation
How can I add the active class to to the current <li> within bootstrap collapse navbar-collapse?
Jasny-Bootstrap reveal menu breaks navbar-collapse and navbar-toggle functionality
Bootstrap navbar-collapse disappear after I click the toggle button with carousel
React bootstrap navbar collapse not working
Bootstrap collapse mobile navbar not working
Navbar dropdown (collapse) is not working in Bootstrap 5
Toggle button collapse not working in Bootstrap navbar in bootstrap
Related Tags