Disable background-color change on hover. inline navigation

[stevepork]

Hi,

As per title really.
I’d like to disable the background-color change when the mouse hovers over the menu. I’d also like to avoid the color change when on the selected page.

Please see the ‘Our Services’ Element on the website: https://dev2.chorkley.uk/

I’d like the background-color of each menu item to remain the same, no matter the page selected or where the mouse is hovering. The current element CSS is:

$el .menu-item {
  background-color: green;
}

$el .menu-item.menu-item-192 {
  background-color: #643671;
}
$el .menu-item.menu-item-191 {
  background-color: #D63762;
}
$el .menu-item.menu-item-187 {
  background-color: #58CECE;
}
$el .menu-item.menu-item-190 {
  background-color: #80A95E;
}
$el .menu-item.menu-item-189 {
  background-color: #DF894C;
}
$el .menu-item.menu-item-186 {
  background-color: #D8489E;
}

Thank you in advance

[ruenel]

Hello @stevepork,

Thanks for writing in!

You were applying the background colors to the incorrect class selector.

You should be using $el .menu-item.menu-item-187 .x-anchor and add !important to force the same hover color. Therefore, your code will have to be updated into this:

 $el .menu-item .x-anchor{
  background-color: green !important;
}

$el .menu-item.menu-item-192 .x-anchor{
  background-color: #643671 !important;
}

$el .menu-item.menu-item-191 .x-anchor{
  background-color: #D63762 !important;
}

$el .menu-item.menu-item-187 .x-anchor{
  background-color: #58CECE !important;
}

$el .menu-item.menu-item-190 .x-anchor{
  background-color: #80A95E !important;
}

$el .menu-item.menu-item-189 .x-anchor{
  background-color: #DF894C !important;
}

$el .menu-item.menu-item-186 .x-anchor{
  background-color: #D8489E !important;
}

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg