Menu styling CSS question

[Brian]

The colors for the nav menu submenu items did not appear to be able to be styled through the theme styles page — or, at the very least, those options and colors did not appear anywhere on that page for me.

I decided to use CSS and, after hunting around a bit, have gotten the nav menu mostly to where I want it. Here’s the CSS that I added to my custom CSS settings:

.menu-panel #nav-menu .sub-menu-wrap .sub-menu {
background: #105f87 !important;
}
.menu-panel #nav-menu .sub-menu-wrap .sub-menu a {
color: white !important;
}
.menu-panel #nav-menu .sub-menu-wrap .sub-menu a:hover {
color: #4ad6d6 !important;
}
.menu-panel #nav-menu>ul>li.current-menu-item {
background: #105f87 !important;
}
.menu-panel #nav-menu>ul>li.current-menu-item a {
color: white !important;
}
.menu-panel #nav-menu>ul>li a:hover {
background: #105f87 !important;
color: #4ad6d6 !important;
}
.menu-panel #nav-menu>ul a:hover {
background: #105f87 !important;
color: #4ad6d6 !important;
}

There’s only one thing that I still want to do and that is change the colors of the menu items when a submenu item is active. In menu2, below, the item I want to change the style of (background and text color) is “Jobs”.

Everything else, including the display of submenus when selecting an item from them, works fine.

Any help is appreciated.

Thanks!
Brian

[Anve S.]

Hi @blstraub,

Try adding following css in child theme custom css option.

#left-panel #scroll-area li.current-menu-item > a {
  color: #30445c;
}
#left-panel #scroll-area li.current-menu-item {
  background-color: grey;
}

Regards
Anve

[Brian]

Great! Thank you! 🙂

[Anve S.]

HI @blstraub,

Cheers , I will close the topic now.If you have other concerns, create a new topic, we will be more than happy to assist you.

Regards
Anve