Design Question

Hello,

To change the color for the active menu link:

#page-wrapper .solo-inner ul.navigation__menubar li>a.is-active,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>a,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>button {
  --r-tx: blue;
}

To change the color for the page title:

#page-wrapper .page-title-text,
#page-wrapper .page-title-text * {
  --r-h1: blue;
}

Best wishes,
Alaa

What is the reason why the third menu (no hover) is not like the first?
Normally it must look like the first, cause of no hover.

I made some chages, cause of the background color.

#page-wrapper .solo-inner ul.navigation__menubar li>a.is-active,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>a,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>button {
color: #FF0000;
background-color: #5881AE;
}
#page-wrapper .solo-inner ul.navigation__menubar li>a.is-active,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>a,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>button:hover {
color: #FFFFFF;
background-color: #FF0000;
}

Rgds
Uwe

Hello,
You should use the browser inspector to examine the element and understand the cause of the issue—it might be a conflict. You can also try using !important to force the style override if needed.

If a CSS variable is already assigned to the HTML element, try using the variable instead of hardcoding the color or background value.

#page-wrapper .solo-inner ul.navigation__menubar li>a.is-active,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>a,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>button {
  --r-bg: #5881AE;
  --r-tx:  #FF0000;
}


#page-wrapper .solo-inner ul.navigation__menubar li>a.is-active:hover,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>a:hover,
#page-wrapper .solo-inner ul.navigation__menubar li.is-active>button:hover {
  --r-bg: #FF0000;
  --r-tx:  #FFFFFF;
}

In your code, I noticed that in the second group, the hover effect is only applied to #page-wrapper .solo-inner ul.navigation__menubar li.is-active > button:hover. Was this intentional?

Best wishes,
Alaa

I used hover because there the background is red.
Red background with red text is very difficult to read. ;-)

Have a nice weekend

Uwe

You too!

Automatically closed - issue fixed for 2 weeks with no activity.