Here is my navbar created by bootstrap Why the button doesn't work in small sizes?
I've compared my navbar with bootstrap several times. why it doesn't work?
<div class="navbar-wrapper">
<div class="container container-class>
<nav class=" navbar navbar-fixed-top ">
<div class="navbar-inner ">
<div class="header-customer-support-nayan07 ">
<h4>Telephone</h4>
<p>982144556633+</p>
</div>
<div class="collapse navbar-collapse ">
<ul class="nav navbar-nav ">
<li class="active "><a href="# ">Home</a></li>
<li class="dropdown ">
<a href="# ">Pages
<span class="caret "></span></a>
<ul class="dropdown-menu ">
<li><a href="# ">Page 1-1</a></li>
<li><a href="# ">Page 1-2</a></li>
<li><a href="# ">Page 1-3</a></li>
</ul>
</li>
<li><a href="# ">Products</a></li>
<li><a href="# ">Blog</a></li>
<li><a href="# ">Contacts</a></li>
</ul>
</div>
<button class="navbar-toggle " aria-controls="navbar " aria-expanded="true " data-target=".nav-collapse " data-toggle="collapse " type="button ">
<span class="sr-only ">Toggle navigation</span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
<span class="icon-bar "></span>
</button>
</div>
Change :
<a href="#">Pages<span class="caret"></span></a>
with:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
EDITED
There was some issues with your html:
Found unclosed class: <div class="container container-class>
data-target=".nav-collapse"
have to be
data-target=".navbar-collapse"
Now it works:
<div class="navbar-wrapper">
<div class="container container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="header-customer-support-nayan07">
<button class="navbar-toggle" aria-controls="navbar" aria-expanded="true" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h4>Telephone</h4>
<p>982144556633+</p>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
</nav>
<div class="header-logo"></div>
</div>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments