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;
}
Related
This is a page I'm working on currently: http://s.codepen.io/moletek/debug/QNeaXq And basically I think the sub-menu breaks when you open and close the parent item. The background will disappear, like it's closing both elements.
I've done some custom stuff, so you can view the src, but here is my standard html:
<div class="collapse navbar-collapse" id="stcs-collapse">
<ul class="nav navbar-nav">
<li class="first active"><a href="welcome" title="welcome" >Welcome</a></li>
<li class="dropdown">About
<ul class="dropdown-menu"><li class="first"><a href="about/our-vision" title="Our Vision" >Our Vision</a></li>
<li><a href="about/our-team" title="Our Team" >Our Team</a></li>
<li><a href="about/church-plants" title="" >Plants</a></li>
<li class="last">Contact Us</li>
</ul>
</li>
</ul>
</div> <!-- A summary of the menu structure with submenu
You can reproduce this in the codepen mentioned above. Or view the GIF below So basically whenever you tap the dropdown parent, it will appear fine. But if you tap the parent again, the entire background will disappear when the child items do.
I'm quite baffled! I appreciate any help.
Thanks!
I'm trying to get a slight delay on the third level of a dropdown using the bootstrap dropdown menu. Sorry I dont have a fiddle to show but the menu is this structure with products on the top menu dropping down to the list windows, doors, conservatories etc then items windows and doors have a submenu to the right at the third level..
products
|
WINDOWS
--> Casement
--> Tilt and Turn
--> Vertical
DOORS
--> Composite
--> French
--> Sliding
--> Bi-fold
--> Slide & Swing
CONSERVATORIES
ORANGERIES
TILED ROOF CONSERVATORIES
PORCHES
ROOFLINE
I have seen some useful javascripts
<script>
jQuery('ul.nav ul.dropdown-menu').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('dropdown-menu').stop(true, true).delay(200).fadeOut();
});
</script>
which is almost working but it shows both 3rd level menus when the parent is hovered ie when windows is hovererd the windows submenu shows then the doors submenu shows with the delay. Could anybody advise how to adapt the above code?
<li class="dropdown">Products<span class="caret"></span>
<ul class="dropdown-menu">
<li class="visible-xs">All Products</li>
<li>
<a id="caret-one" class="trigger right-caret">Windows</a>
<ul class="dropdown-menu sub-menu">
<li>Casement</li>
<li>Tilt & Turn</li>
<li>Vertical Slider</li>
</ul>
</li>
<li>
<a id="caret-two" class="trigger right-caret">Doors</a>
<ul class="dropdown-menu sub-menu">
<li>Composite</li>
<li>French</li>
<li>Sliding</li>
<li>Bi-fold</li>
<li>Slide & Swing</li>
</ul>
</li>
<li>Conservatories</li>
<li>Orangeries</li>
<li>Tiled Roof Conservatories</li>
<li>Porches</li>
<li>Roofline</li>
</ul>
</li>
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.
I am using bootstrap sidebar.
Its only two levels sidebar nav on the website. I have added two more levels, now its four level sidebar. I am receiving a random issue
that some time when I click on second nav of same level it doesn't open nor other nav collapse, until and unless I scroll down. Then it starting working back again.
Like in the below ScreenShot. By clicking on 'Alerts' it should open and accessing should collapse but its not. But on scrolling it working fine.
I have added the code. Please do let me know if i can add anything more.
<body data-spy="scroll" data-target=".p8-sidebar" onLoad="fixNavbarIssue()">
<div class="p8-sidebar hidden-print hidden-sm hidden-xs bs-docs-sidebar hidden-print affix" role="complementary">
<ul class="nav p8-sidenav nav-stacked">
<li class="active">
Console
<ul class="nav">
<li class="">Login
</li>
<li class="">Understanding Console
</li>
<li class="">Connected Users
</li>
<li class="">Connected Consoles
</li>
<li class="">Logout
</li>
</ul>
</li>
<li class=""> Alerts
<ul class="nav">
<li class="">
Creating a New Alert
<ul class="nav">
<li>Basic Information
</li>
<li>Send To
</li>
<li>Event Name
</li>
<li class="">Short Message
</li>
<li class="">Long Message
</li>
<li class="">
Require Acknowledgement
</li>
</ul>
Bootstrap css/js are unchanged.
I want to do a dropdown menu vertical with a twitter bootstrap. My dropdown links are a same class CSS. But when I choose one if them, the two dropdown links slide.
Thanks for your help.
<ul class="nav nav-list">
<li class="nav-header">Ac</li>
<li class="nav-header main">Pla
<ul>
<li class="nav-subheader">Qua</li>
<li class="nav-subheader">Qua1</li>
<li class="nav-subheader">Qua2</li>
</ul></li>
<li class="nav-header main">Proj
<ul>
<li class="nav-subheader">Sou</li>
<li class="nav-subheader">Sou1</li>
<li class="nav-subheader">Sou2</li>
<li class="nav-subheader">Sou3</li>
</ul></li>
<li class="nav-header">Cen</li>
<li class="nav-header">Mes</li>
</ul>
You're missing a few key classes and information.
See the jFiddle I've created:
http://jsfiddle.net/KhCrm/
Make sure you have included the relevant JS/CSS (The only 2 needed to make this work really are dropdown.js, and the bootstrap.css.