CODEWITHSUNDEEP
twitter-bootstrap
user1353519
user1353519

Reputation: 71

Why bootrstrap 3 active class not working?

I have a menu.Please see below

<nav role="navigation" class="navbar navbar-default">
               <div class="navbar-header">
                   <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                       <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 id="navbarCollapse" class="navbar-collapse collapse">

                   <ul class="nav navbar-nav">
                       <li><a href="#">welcome</a></li>
                       <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">menu1<b class="caret"></b></a>
                       </li>
                       <li><a href="#">menu2</a></li>
                       <li><a href="#">menu3</a></li>
                       <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">menu4<span class="caret"></span></a>
                           <ul class="dropdown-menu" role="menu">
                               <li><a href="#">menu4.1</a></li>
                               <li><a href="#">menu4.2</a></li>
                           </ul>
                       </li>
                       <li><a href="#">menu5</a></li>
                   </ul>
               </div>
           </nav>

I need to show active menu item as highlighted.But "active" class is not working and menu item doesn't show as active one.

Is anything missing my my code?

Thanks

Upvotes: 0

Views: 50

Answers (1)

Anthony Chu
Anthony Chu

Reputation: 37540

There's no active class in the sample so it's difficult to tell what went wrong. A common mistake is to put the class on the a instead of the li. It needs to be on the li. For example...

<li class="active"><a href="#">menu2</a></li>

Fiddle

If it still doesn't work, post the relevant CSS or create a fiddle.

Upvotes: 1

Related Questions