[jamiebrownParticipant]

Hi there, in order to change the lines displayed in the header menu when hovering on page names i added this code in the css (as in another question from the forum)
/* Removes line above current and hovered menu item Integrity */
.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 !important;
}
/* Adds line below current and hovered menu item text*/
.x-navbar .desktop .x-nav > li > a:hover span, .x-navbar .desktop .x-nav > .x-active > a span, .x-navbar .desktop .x-nav > .current-menu-item > a span {
padding-bottom: 5px;
border-bottom: 2px solid grey;
}

The problem is that this applies on the cart button too that when hovered (depending on the screen you are on) changes shape in a way that i don’t want. Is there any way i can exclude the cart button from the code above?
Some screenshots follow to be mroe clear.

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Meanwhile, you can make use of this code:

/* Removes line above current and hovered menu item Integrity */
.x-navbar .desktop .x-nav > li:not(.x-menu-item-woocommerce) > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: none !important;
}

/* Adds line below current and hovered menu item text*/
.x-navbar .desktop .x-nav > li:not(.x-menu-item-woocommerce) > a:hover span, 
.x-navbar .desktop .x-nav > .x-active > a span, 
.x-navbar .desktop .x-nav > .current-menu-item > a span {
  padding-bottom: 5px;
  border-bottom: 2px solid grey;
}

Please let us know if this works out for you.

[jamiebrownParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[jamiebrownParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

I went ahead and change the code to this.

/* Removes line above current and hovered menu item Integrity */
.x-navbar .desktop .x-nav > li:not(.x-menu-item-woocommerce) > a:hover, 
.x-navbar .desktop .x-nav > .x-active:not(.x-menu-item-woocommerce) > a, 
.x-navbar .desktop .x-nav > .current-menu-item:not(.x-menu-item-woocommerce) > a {
  box-shadow: none !important;
}

/* Adds line below current and hovered menu item text*/
.x-navbar .desktop .x-nav > li:not(.x-menu-item-woocommerce) > a:hover span, 
.x-navbar .desktop .x-nav > .x-active:not(.x-menu-item-woocommerce) > a span, 
.x-navbar .desktop .x-nav > .current-menu-item:not(.x-menu-item-woocommerce) > a span {
  padding-bottom: 5px;
  border-bottom: 2px solid grey;
}

[jamiebrownParticipant]

Amazing, thanks!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts