Docs

[Horizon]

Hi

On my site i have a menu with a sub menu. When a page is active i.e when you’re on the Home page the Home title in the nav bar has a background color.

However when i’m on a sub menu page i’d like the parent page to have a background color so the user can see where they’re at.

At the moment i use this code:

`.x-navbar .desktop .x-nav > li.menu-item-has-children > a {
color: white;
background-color: #1a0000;
}’

But the background color stays there, i only need it to display when the sub menu pages are active.

How can i achieve this?

Thanks 🙂

[Horizon]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar .desktop .x-nav > li.current-menu-parent a {
color: white;
background-color: #1a0000;
}

Hope that helps.

[Horizon]

Thanks almost perfect,

Only problem now is the sub menu has a black background with a grey margin, how can i make the sub menu background completely black or completely grey?

Thanks again

[Joao]

Hi There,

It seems like you already found a solution.

I just can see de dividers lines.

In case you want to get rid of them. please add the following code to Appereance Customizer Custom CSS

.desktop .sub-menu li:after,   .desktop .sub-menu li:before {
display: none !important;
border: 0px;
}

Hope that helps,

Joao

[Horizon]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for updating. If you want to make the entire submenu black then use this :

.x-navbar .sub-menu {
  background: #1a0000!important;
}

To make the submenu grey, use this instead:

.x-navbar .sub-menu li a {
  background: #474747!important;
}

.x-navbar .desktop .sub-menu li::before, .x-navbar .desktop .sub-menu li::after {
  background-color: #474747;
}

Hope this helps.

Cheers!

[Horizon]

Thanks for your reply, i went with the first code:

.x-navbar .sub-menu {
  background: #1a0000!important;
}

However the sub menu text is also black; except when on a page within the “Garage Doors” menu, how can i keep the sub menu text white?

Thanks

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.x-navbar .sub-menu li a {
  color: white!important;
}

Hope it helps

Joao

[Horizon]

Perfect thanks, One last thing, when hovering over the menu items is it possible for the background of each item to change to black (The same way the active page menu item has a background color)

[Joao]

Hi There,

Please Update the code above to:

.x-navbar .sub-menu li a {
  color: white!important;
  padding-left: 20px;
}

.x-navbar  li a:hover {
  background: black!important;
}
.x-navbar.x-navbar-fixed-left .desktop .sub-menu {
padding: 0;
}

Hope it helps

Joao

[Author]

Posts