Change color of active item in navigation menu including submenus

Did you follow the instructions from @masacaai on that other thread?

It works now. I was a bit confused with the list view, but it turns out the items in the navigation widget aren’t treated as single-page links by default. Clicking on ‘edit’ allowed me to convert them to single-page links, and that made everything much clearer.

Thank you very much, again. After carefully reading again, yes your quotation was the problem for the two items in submenu “Bildungsangebote”. And I missed the !important statements in the css file too. My css now is:

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
	text-decoration: underline; 
	text-decoration-style: solid; 
	text-decoration-color: #f6f6f6 !important;
	color: #f6f6f6 !important;
	background-color: #c27113 !important;
}

This however didn’t solve the problem for submenu-items “Wittgensdorfer St?rche” and “Bildungsangebote” when clicking themeselves. Or at least I couldn’t find an option to convert them to single-page links too. I circumvent this by adding the two items to class “wp-block-navigation-link”.

Now on mobile devices when clicking on one of the submenus it marks the whole submenu including it’s items. Any idea how to prevent this?
However my initial issue is solved, thanks again.

• This reply was modified 2 years, 5 months ago by krischan941.
• This reply was modified 2 years, 5 months ago by krischan941.
• This reply was modified 2 years, 5 months ago by krischan941.

Replace your current custom CSS:

/*
 * nachfolgende Bl?cke manuell hinzugefügt bzw angepasst
 */

.wp-block-navigation__container {
  gap: 0;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding: 1em 1em;
}

.wp-block-navigation .wp-block-navigation-item:hover,
.wp-block-navigation .wp-block-navigation-item:focus {
	background-color: #c27113 !important;
	color: #f6f6f6 !important;
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-color: #f6f6f6 !important;
	transition: 0.3s;
}

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
	text-decoration: underline; 
	text-decoration-style: solid; 
	text-decoration-color: #f6f6f6 !important;
	color: #f6f6f6 !important;
	background-color: #c27113 !important;
}

@media only screen and ( max-width: 500px ) {
	.wp-container-5 {
		min-height: 4em !important;
	}
}

.background-image-random, .wp-block-cover__background {
	transition: 2s;
}

And use this:

/*
 * nachfolgende Bl?cke manuell hinzugefügt bzw angepasst
 */

.wp-block-navigation__container {
  gap: 0;
}

.current-menu-item,
.wp-block-navigation-item:hover,
.wp-block-navigation-item:focus,
.wp-block-navigation-item li :hover,
.wp-block-navigation-item li :focus {
	background-color: #c27113;
	transition: 0.3s;
}

.has-background.wp-block-navigation-item.current-menu-item {
	background-color: #c27113 !important;
}

.wp-block-navigation-item:hover > a,
.current-menu-item > .wp-block-navigation-item__content {
	color: #f6f6f6;
}

.wp-block-navigation-item:hover svg,
.current-menu-item.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
	stroke: #f6f6f6;
}

@media ( min-width: 768px ) {

  .wp-block-navigation__container > .wp-block-navigation-item {
    padding: 1em;
  }

}

@media only screen and ( max-width: 500px ) {
	.wp-container-5 {
		min-height: 4em !important;
	}
}

.background-image-random, .wp-block-cover__background {
	transition: 2s;
}

I hope this takes care of that.

Ok I did. Now I don’t need my 2 submenus in class “wp-block-navigation-link” anymore. It works without and my 4 submenu items look somehow nicer. Thanks!
But now when clicking menu items on mobile devices in >hamburger menu< they stay invisible except the 4 submenu items. If I turn my phone 90 degrees so it turns my display view, too I see the full navigation (no hamburger menu) and this works fine.

No idea, sorry.