Toggle button collapse not working in Bootstrap navbar in bootstrap

Amir Amiri

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>
Alex Coloma

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.

edited at
0

Comments

0 comments
Login to comment

Related