asked on

Bootstrap 3 Navbar toggle - collapses button appears but dropdown doesn't occur.

I don't know what I'm doing wrong here but I expect it's something silly.

I'm using Bootstrap and I cannot get the toggle to work. Button appears but on clicking button inside menu doesn't appears.

<nav class="navbar navbar-default navbar-fixed" data-spy="affix" data-offset-top="20">
  <div class="container-fluid">
  <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <a class="navbar-brand" href="index.php"><b>Title</b></a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home"><b>Home</b></a>
      </li>
      <li>
        <a href="#" data-toggle="modal" name="link" data-target="#myLoginModal"><b>Submik</b></a></button>
      </li>
      <li>
        <a href="#" data-toggle="modal" data-target="#myLoginModal"><b>Sub2</b></a>
      </li>
    </ul>
</div>
</div>
</nav>

Open in new window

jitendra patil

the data-toggle for all the Li > a element should be dropdown

see the modified version of code below

<nav class="navbar navbar-default navbar-fixed" data-spy="affix" data-offset-top="20">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php"><b>Title</b></a>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home"><b>Home</b></a>
                    </li>
                    <li>
                        <a href="#" data-toggle="dropdown" name="link" data-target="#myLoginModal"><b>Submik</b></a>
                    </li>
                    <li>
                        <a href="#" data-toggle="dropdown" data-target="#myLoginModal"><b>Sub2</b></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Open in new window

hope this helps

Rishab tata

ASKER

@jitendra it did not worked!!

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.