Menu
I'm using the default navbar and a couple of the list items are dropdowns. I'm not able to click the link that triggers the dropdown. I know that I could just add a duplicate link into the dropdown but I'd rather not. Is it possible to make the head link a clickable link (not just a handle for the dropdown)?
For reference, see the first link in the dropdown below. I want users to be able to click it and actually go to the page it points to.
<nav class="navbar navbar-fixed-top admin-menu" role="navigation"> <div class="navbar-header">...</div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> I DONT WORK! <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="/page2">Page2</a></li> </ul> </li> <li><a href="#">I DO WORK</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> 
770
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add . dropdown-menu-right to a . dropdown-menu to right align the dropdown menu.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.
The . navbar class is used to create a navigation bar. The navbar can extend or collapse, depending on the device size ie, the navbar is used to create the responsive design by using . navbar-expand-xl|lg|md|sm class.
Here this the code which slides down the sub menu on hover, and let you redirect to a page if you click on it.
How: strip out class="dropdown-toggle" data-toggle="dropdown" from a tag, and add css.
Here is the demo at jsfiddle. For demo, please adjust jsfiddle's splitter to see the dropdown due to Bootstrap CSS. jsfiddle won't let you redirect to a new page.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript' src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> <style type='text/css'> ul.nav li.dropdown:hover ul.dropdown-menu { display: block; } </style> </head> <body> <nav class="navbar navbar-fixed-top admin-menu" role="navigation"> <div class="navbar-header">...</div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a href="http://stackoverflow.com/">Stack Overflow <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="/page2">Page2</a> </li> </ul> </li> <li><a href="#">I DO WORK</a> </li> </ul> </div> <!-- /.navbar-collapse --> </nav> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
