I'm dealing with a problem with Bootstrap navbar, where I have multiple dropdowns but I need the actual dropdown-toggles to be links aswell, it works on desktop, but there is a problem with that on mobile, where there is no hover which Im using to show the dropdown.
For example this basic menu:
<!-- 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">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
I am controlling the hover dropdown with JQuery.
I want to have the dropdowns shown on mobile automatically, so you can click all of the links.
I used the solution described here on stackoverflow
Problem with that one is that if you have another link or dropdown under the first one, the second one overlays the dropdown menu above it so you can't click it.
Look at this jsFiddle
When the navbar is collapsed, open it and try to hover over the dropdown menu, you can see that the link underneath is highlighted instead.
For some reasone the bottom link element gets expanded, and I can't get rid of it.
Any help would be much appreciated.
Related
I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/
i am using bootstrap sticky menu , now for dropdown when I hover over parent menu sub menu is displayed but parent menu is not highlighted as I go one level down .
here you can see washing and cleaning comes under services .
What I want is the menu services should be highlighted as washing is at the moment this is my html structure
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About us</li>
<li>About us</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<li>Cleaning </li>
<li>Washing</li>
</ul><!-- end dropdown-menu -->
</li>
</ul>
http://www.bootply.com/j4dAggAcCh
You probably missing the :focus on your menu link. This keeps your link highlighted when your in a subnav.
So what I should try in your CSS:
.dropdown-toggle:focus{
color: red;
}
I was trying to update my version of bootstrap from 3.1.0 to the currently latests 3.3.0.
But I noticed after upgrading that my dropdown menu's aren't working anymore.
For some reason the javascript doesn't pickup the elements with the .dropdown-toggle css class.
But when I dive into the chrome javascript console and execute the following command:
$('.dropdown-toggle').dropdown()
I notice the dropdown menu's do work. I compared the html of the menu's before and after this command and it remained the same.
I also looked in the release notes from bootstrap and could find any breaking changes regarding dropdown menus. This is a example piece of my code:
<ul>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
</li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
Overview
</li>
<li>
Customer form
</li>
</ul>
Does anybody got a tip?
Worked just fine, only thing you must do is to use Jquery latest
Here is working fiddle
http://jsfiddle.net/2qWy8/22/
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I'm moving from Bootstrap 2.3 to Bootstrap 3.0 and want to remove the double tap functionality from the li elements in a dropdown in a navbar.
So for example:
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
In the above I don't want to have to double tap to select the Action line link.
I have tried restructuring my anchors, but it appears to be tied to the class name. I suspect I will have to modify the bootstrap js file, and this isn't an issue. Just can't figure out which I have to edit.
Does anyone know if this will be possible?
This was my mistake. There is no double tap style functionality with Bootstrap. Instead what was happening was that since I was hiding child elements (display: none) the dropdown still thought they existed. Normally you would tab once to display the dropdown, and then tap again to access the parent. By completely removing the hidden child elements the dropdown functioned with a single tap.
I have this code, I want to make this menu collapse for mobile-devices
<nav class="navigation">
<ul class="nav nav-pills nav-stacked" id="nav-menu">
<li class="active" >Domov</li>
<li>Koncerty</li>
<li>Shop</li>
<li>Download</li>
<li>Kontakty</li>
<li>Troll</li>
</ul>
</nav>
And I want to do this:
I've found a similar question, which seems to have a detailed answer that will be useful for you. It didn't work perfectly for me, but it does seem much closer than I was before.
Check it out: makes nav-pills collapsable just like nav-bar in bootstrap
Try the following code. This should help you. I assume what you need from the reference link you provided. Though that site I guess is not using bootstrap.
<nav class="navbar navbar-default" role="navigation">
<div class="">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
You should get more help from docs
http://getbootstrap.com/components/#navbar