Menu Background Color on Hover

  • Hi,
    Could you tell me how I change the menu hover over color?
    At the moment it is showing as red with a white background.

    I’d like this to be a blue with white background when not selected (currently it is black with white background), and when on hover over, then blue background with white writing.

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi Muzz,

    You can try adding the following code to your Admin Panel > Appearance > Customize > Additional CSS field:

    #header .header-links > ul > li > a {
  color: blue;
}

#header .menu > li > a:hover {
  background: blue !important;
  box-shadow: inset 0 3px 0 0 white !important;
}

#header .menu > li > a:hover span {
  color: #ffffff !important; 
  box-shadow: inset 0 3px 0 0 white !important;
}

    Thanks!

    Thread Starter muzz15

    (@muzz15)

    Brilliant! Thanks you so much. That worked!

    Thread Starter muzz15

    (@muzz15)

    Just one other related question, do you have the code to set the selected tab to also be a certain color? At the moment, it is still the default red once you click on it.

    Thanks

    Hi Muzz,

    You can use this code:

    #header .menu > li.current_page_item > a span {
  color: green !important;
}

#header .menu > li.current_page_item > a {
  box-shadow: inset 0 3px 0 0 green;
  -webkit-box-shadow: inset 0 3px 0 0 green;
  -moz-box-shadow: inset 0 3px 0 0 green;
  -ms-box-shadow: inset 0 3px 0 0 green;
  -o-box-shadow: inset 0 3px 0 0 green;
}

    Thanks!

    Thread Starter muzz15

    (@muzz15)

    Thanks that worked perfectly! Much appreciated!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Menu Background Color on Hover’ is closed to new replies.