We have a oddly coded sub menu that was customized so it could be in a specific column setup, however when you click a link under that sub menu, the sub menu then jumps up while the next page is loading. It looks pretty bad :P
For example when you go here: goo.gl/4mW5sW
and hover over the menu item "All discs" you can see the dropdown with the 2 customized columns.
If you click one of these links you will see the drop down than jump up while the page loads the link you clicked.
I have been combing through the css trying to locate why it jumps with an active click and am having no luck. Maybe another pare of eyes will help?
I even tried this pathetic attempt
a:active .sub-menu{display:none;}
But it didnt help
Thanks!
The problem is with the margin-top and the hover state of the ul class="sub-menu'. Find a way to select only the first column and add the next css:
margin-top: -1px!important;
Then select only the second column and add the next css:
margin-top: -1px!important;
You are giving both colums a -71px as top-margin and when hover is toggled you mess that margin for the first column, giving it a -71px of top margin.
If you provide code, i can help you further
Related
I am having a big issue with a website - I really hope you can help me out.
https://www.hillcrestatc.com/mood-disorders/
There is a main menu and submenu showing on such a page.
When one hovers over the main menu on this page and then tries to select a suboption, the dropdown disappears and acts as if they want something from the secondary menu.
Any idea why this is happening and how to fix it?
Thank you!
I tried your website on vivaldi (chromium) and it shows that the sub menus of the first top menu can't be reached. I used the debugger, toyed around and found the solution: z-indexes
The thing is the secondary menu has a z-index:1 !important and the top one doesn't, so it gets kind of mixed (sorry I can't really "explain" it clearly).
Here are two lines of code you can try in your css, and also try to remove this one while you're at it, otherwise it won't work:
At line 33:
.fusion-secondary-main-menu {
background-color: transparent!important;
z-index: 1!important; /*delete this line here*/
}
Add these two lines:
.fusion-header{position:relative;z-index:1;}
.fusion-secondary-main-menu{position:relative;z-index:0;}
Let me know if this helps!
I'm using meteor + bootstrap.
My nav is at the bottom of the page and the logginButtons are in the navbar.
The dropdown drops down, below the end of the page.
Is there a way to make it drop up, on top of the navbar ?
The pattern is my background, under firefox's window.
The Bootstrap document states it clearly that
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.
You will see a working example if you follow the link.
I have a link/button that moves down when clicked but upon doing so all other menu items move as well. How does one keep the other items in place while the button move down?
http://www.llcinpa.com/ click on Form Your LLC Now
the easy answer is this:
#menu-main-nav li{margin-left:28px !important}
this way no matter what, you'll keep your margins, which are the root of the problem
I am in need of a dropdown-submenu using Bootstrap 3.
There are questions like this all over the place, one in particular that got me closer is this one: Bootstrap 3 dropdown sub menu missing
However, the answers there display the dropdown to the right of the current menu. I need to display the dropdown within the current menu, just sliding the rest of the nav down when open.
Here is a bootply with what I have so far: http://bootply.com/91787
Currently the submenu is just overlaying the current dropdown... I need the submenu to push the rest of the dropdown elements down when open. How can I achieve this? Any help getting the dropdown to activate on click instead of hover would be helpful as well, but the main question is more important.
Like this ? I´m not sure if I understood your question right.
http://bootply.com/91794
Edit:
Quite simple, I hope this is what you want:
.dropdown-menu {position: relative;}
http://bootply.com/91800
Jeff Mould solved this beautifully.
Git: https://github.com/jeffmould/multi-level-bootstrap-menu
Nav Demo: http://theboot.fenwickmedia.com/
Hi, I'm doing a drop down menu in HTML/CSS the normal way; i.e., using ul li and nested uls for the drop-down menus.
I want to have the drop down menu slightly offset below the nav bar like it is here in
Orman Clark's Studeo Theme. I can't work out how to do this and still keep the drop down menu visible when I move my cursor between the top link and the drop down menu.
Any help is greatly appreciated.
.setTimeout() is the key you need!
(Try to hover on the 3rd li and reach the open menu by moving around the page! It will stay open, waiting for a predefined amount of time for you to mouse over. If it does not receive that input in that period, it will hide itself again.)
This could help:
DEMO
Answer found HERE