Changing colors in hovered-over dropdown menu items

• 

  jweebles · Member · Jun 9, 2015 at 10:19 pm

  • Copy link
  • Add topic to favorites

  I’ve been trying to figure out how to change the colors (both text and background) of the items in the dropdown menu in the main navigation bar. Specifically, the color of the item when you hover over it in the opened dropdown menu. I’ve looked through the forums but can’t find anything that applies to what I’m trying to do.

  Any help would be appreciated, thank you very much!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-jeanpierreac · Staff · Jun 10, 2015 at 8:05 am

  • Copy link

  Hi jweebles!

  The selector for your first level menu items is “#menu-under-header.navbar .nav > li > a” and then you need to use :hover to indicate you want the magic on hover. In addition you would probably need to choose a better color than mine (I used red in the css code). You can use this page to easily try different RGB combinations.

  #menu-under-header.navbar .nav > li > a:hover {
      background-color: rgb(255,0,0) !important;
  }

  What about second level menu items? The selector is slightly different (There is one more li).

  #menu-under-header.navbar .nav > li  li > a:hover {
      background-color: rgb(0,255,0) !important;
  }

  I hope this helps!

• 

  jweebles · Member · Jun 10, 2015 at 8:23 pm

  • Copy link

  Thank you so much, raulanton! I’m going to try this!

• 

  staff-jeanpierreac · Staff · Jun 11, 2015 at 7:51 am

  • Copy link

  You are welcome.

  If you have more questions, we’ll be glad to try to help.