Docs

[Michael R]

Hello,

I am currently using the code below to customize my renew navigational menu items on hover and for active selections. Is there a CSS I can use to only modify the nav items that are not active and not hovered? Basically I want to add opacity to the nav items unless they are active or on hover.

Thank you!

Here is what I currently have in my CSS customizer for hover and active:

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
background-color: #f3f3f3;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

[Michael R]

This reply has been marked as private.

[Lely]

Hi Michael,

Please also add this CSS:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    opacity: .5; /*Adjust to you preferred opacity*/
}

Then update this:

/* Navbar active and hover background color */
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
      box-shadow: none;
      background-color: #f3f3f3;
}

To this:

/* Navbar active and hover background color */
.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
      box-shadow: none;
      background-color: #f3f3f3;
      opacity: 1;
}

Hope this helps.

[Author]

Posts