Archived topic
Submenu item kept visible
22 replies · Started by Clemens on June 16, 2018
Hi there,
I could find here just some topics to the problem, but mine seem to be much simpler:
(1) I installed a horzontal sub-menu and I would like that it remains visible under the primary menu as long as a visitor is surfing on one of the submenus so that he mustn't hover each time over the Main menu for continuing reading on other submenu-items.
(2) I do not really find out how to manage that the length fits exactly with the lenght of the main navigation menu. In addition, the background of the submenu seems to be longer. Were can I change it, please.
https://fuehrungs-strategie.de
Thx,
Clemens
sorry,mistake: https://fuehrungsstrategie.de
Hi there,
So you're wanting the sub-menu to always be visible when you're visiting one of the sub-menu pages?
If so, try this CSS:
#site-navigation .main-nav > ul > li.current-menu-ancestor .sub-menu {
opacity: 1;
pointer-events: auto;
height: auto;
overflow: hidden;
left: 0;
visibility: visible;
right: 0;
}
2. I'm not too sure what you mean. However, this custom CSS you have will cause issues:
.sub-menu a {
left: -165px;
}
If you remove that, it should work better.
Hi, Tom,
thank you for your answer. The css works fine. Great!
I removed the left padding, but now, the submenue ist not unter the main menu when hoovered. How can I change this? And it would be great if the background of the submenu could become other color then the main menu as before.
Have a nice day,
Clemens
Hi, Tom,
I just realized another small problem with the main navigation menu. Normally, the sort lines above the actual item worked fine, but now, they are not always in the right place (they stay over an item with is no longer the actual one)
Bye, Clemens
Try this to fix the positioning:
.dropdown-hover .main-navigation:not(.toggled) ul li:hover > ul {
left: 0;
}
I'm not really sure what you mean by sort lines? Can you explain a bit more?
Hi there,
your solution is quite perfect - but only if I choose "floating" in Customizer-Layout-Main navigation.But if I choose "under the header" the submenu-items take the full width of the page.
How could I avoid this, please?
Thanks,
Clemens
I'd have to see it to know what's going on. Can you switch the navigation location for me?
The actual issue is shown if you go to Primary menu floating left
You can find <a href="https://fuehrungsstrategie.de/wp-admin/customize.php?url=https%3A%2F%2Ffuehrungsstrategie.de%2Funternehmensberatung-strategische-kommunikationsberatung%2F%3Fyp_rand%3D305770
">here page that has no floating, but centered menu.
The problems seems to be that all is fine when a background is chosen, otherwise the submenu seems to be to be wider than the menu. So perhaps the easiest way is to show a background.
Just another problem occured concerning the active menu item. All works fine, but how could I manage that if a visitor is landing on a certain page, this page ist also visible as active in the (sub-)menu.
Thx,
Clemens
I'm not able to see your Customizer preview, as I'm not logged in as an admin. Any chance you can show me some screenshots of the issue?
The links are missing..... strange....
https://screenshots.firefox.com/1Ay4SMlPFPWVlHbX/fuehrungsstrategie.de
https://screenshots.firefox.com/cCKotTQn8YQHxTD0/fuehrungsstrategie.de
Did you sort this out? Here's what I'm seeing: https://www.screencast.com/t/m2aQpOn5Z
That's really strange - that's the actual solution, but not the screeshot I marked above.
Nevertheless it is good enough to explain:
If I have a background, it looks fine. But I would like to cut the background to the lenght of the content - but then the submenue items should have the same length as the content of the main menu. The first screenshot shows the Menu and submenu floating left, the other is centered. Sorry but I don't know how to get a screenshot that is more helpful.
Thanks,
Clemens
What if you add this?:
#site-navigation {
max-width: 1000px;
}