[Support request] Submenu item kept visible

[Clemens]

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

[Clemens]

sorry,mistake: https://fuehrungsstrategie.de

[Tom]

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.

[Clemens]

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

[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

[Tom]

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?

[Clemens]

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

[Tom]

I’d have to see it to know what’s going on. Can you switch the navigation location for me?

[Clemens]

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

[Tom]

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?

[Clemens]

Oh, sorry, here we are:

Main menu floating left = as it is actually correct. But I would like to have the navigation menu centered

= Main menu « centered ».
But now, due to the background, the items of the submenu are larger then the width of the menu items.

Thanks,
Clemens

[Clemens]

The links are missing….. strange….

https://screenshots.firefox.com/1Ay4SMlPFPWVlHbX/fuehrungsstrategie.de
https://screenshots.firefox.com/cCKotTQn8YQHxTD0/fuehrungsstrategie.de

[Tom]

Did you sort this out? Here’s what I’m seeing: https://www.screencast.com/t/m2aQpOn5Z

[Clemens]

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

[Tom]

What if you add this?:

#site-navigation {
    max-width: 1000px;
}

[Author]

Posts