Reputation: 41
The disable part is not working in dropdown-toggle. Here's the code.
<div class="nav-collapse collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><a href="index.html">HOME</a></li>
<li class="divider-vertical"></li>
<li><a href="about.html">ABOUT ME</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="gallery.html">GALLERY
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="units.html">Unit & Events</a></li>
<li><a href="personal.html">Personal</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li><a href="#"></a></li>
<li class="divider-vertical"></li>
<li><a href="contact.html">CONTACT</a></li>
<li class="divider-vertical"></li>
</ul>
</div>
Upvotes: 2
Views: 2637
Reputation: 792
When you're disabling links in the menu, you have to add class="disabled" to the list item, and not the anchor.
Links will still be active even if the list item is disabled, so you will have to use javascript or a server-side language to prevent the links from firing. If you're dynamically generating the list, you can set the anchor's href to href="#" or you can do the same with javascript.
http://getbootstrap.com/components/#dropdowns-disabled
<li class="disabled"><a href="#" title="Disabled Link">HOME</a></li>
<li><a href="about.html">ABOUT ME</a></li>
jQuery example:
$('li.disabled > a:link').on('click', function(e) {
e.preventDefault();
});
Upvotes: 2