[Resolved] Menue error: Ancor Page versus Single Page

[Bjoern Christian]

Hello,

we do have a Problem: our side consists of a menue leading to an ancor within a large top to down page. But we do also have some single pages (Projects f.e.) that Show up a content outside the ancor page. The Problem:

If we are within the ancor page, the mouseover-highlightening of the menue is working only for the single page menue entries. If we are within a single page the highlightening works only for the menue entries leading to the ancor page.

What could this be?

[Leo]

Hi there,

Can you provide a link to your site?

[Bjoern Christian]

LINK

[Leo]

If I understand you correctly, you want to set a hover color for current menu items?

If so try this CSS:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    background-color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

[Bjoern Christian]

Hello,

plkease take another look at the Problem: hover Color works on the entry page for the two menue items “Downloadbereich” and “Jobs”. But not for the Rest. If you are inside Jobs it works for the rest biut not for the two allready mentioned entries.

The difference: the menue items “Downloadbereich” and “Jobs” target to an external site or (“Jobs”) to a single page. The other menue items lead to an anchor within the large “one page design”…

[Bjoern Christian]

Another effect: if you click on the Impressum (bottom of the side) or on Datenschutz, highlighting works fine.

[Leo]

Did you try my CSS? I’m not seeing it being added?

[Rolandas]

Hi

It works great on the main menu items, but not on sub-menu items.
I want to set a hover color for current sub-menu items too.
What CSS should be written for sub-menu?

[Leo]

Hmm it should work for sub menu as well.

Can you link me to your page with the CSS added?

[Rolandas]

http://www.sisla.lt/

[Leo]

Try this for the overall CSS:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover
.main-navigation .main-nav ul ul li[class*="current-menu-"] > a:hover {
    background-color: #b72029;
    color: #ffffff;
}

[Rolandas]

I tried it. Then it does not work, either at the main or sub-menu.

[Rolandas]

Then somehow I tried with “! Important”.
And it worked.

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    background-color: #b72029 !important;
	color: #ffffff !important;
}

[Leo]

Yeah it was probably getting over written.

Try this if you don’t want to use !important:

body .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover,
body .main-navigation .main-nav ul ul li[class*="current-menu-"] > a:hover {
    background-color: #b72029;
    color: #ffffff;
}

[Rolandas]

Not work, either at the main or sub-menu.

[Author]

Posts