Custom hover/active colours for each dropdown child - NavBar

[Steve Webb+ 1]

Hi,

 

I am trying to find out how to change the hover background colours for each subpage in dropdown menus in the NavBar.

I have found the codes to change the background colour for all the dropdown hovers in a topic here, but I would like each of the drop downs to have their own hover and active colour.

 

Here is the site: http://imetropol.com

 

The drop down for locations on the right in the NavBar is what I am trying to change.

 

I have given each of the menu items their own custom class, but I can't figure out how to make them their own colour.

 

For example, for the 'print' hover, I have given the class 'print-nav', and I would like the hover and active states to have a blue background.

 

The 'west' will be yellow, 'studio' will be magenta, and 'design' will be green.

 

Can't find the bit of code in Chrome dev tools..

 

Someone please help!  Thanks so much in advance!

[Danny+ 1,327]

Hi,

 

Use the following code, change the colors to your preference:

 

#site .print-nav a {

  color: red;

}

#site .west-nav a {

  color: green;

}

#site .studio-nav a {

  color: blue;

}

#site .design-nav a {

  color: purple;

}

The end result will look like this - https://cloudup.com/cpxy6aqbpB7

[Steve Webb+ 1]

Hey Danny,

 

Thanks so much for the reply.

This is almost what I am after.. I am actually seeking to just change the hover background colour for each of the drop downs.

Currently, the code I have applies to the whole dropdown, and I am looking to have them each to have different coloured backgrounds on hover..  Possible?

 

Thanks again!

 

-Matt

[Danny+ 1,327]

Try something like this:

 

#site .dropdown-menu .print-nav > a:hover {

  background-color: red;

  background-image: none;

}

 

Do the same for each of your menu items. Also, please be aware that our customisation support is limited and if you require any further CSS, you will need to do this yourself or ask your question on a CSS specific forum.

[Steve Webb+ 1]

Great thanks Danny!

[Danny+ 1,327]

No problem.