add a hover color?

• 

  belleweatherfarm · Member · Jan 24, 2015 at 5:13 pm

  • Copy link
  • Add topic to favorites

  Right now, there’s no “hover color” on my menu bar. Is there CSS I can add to have a hover color? (I will use #94f0d8 as the hover color)

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

• 

  belleweatherfarm · Member · Jan 24, 2015 at 5:13 pm

  • Copy link

  Oh! My theme is Motif :)

• 

  staff-happychia · Staff · Jan 24, 2015 at 9:28 pm

  • Copy link

  We can use this style:

  .main-navigation li:hover {
      background: #94f0d8 ;
  }

  But the padding on the top menu list items is uneven which is why the hover box size is uneven as well.

  You can try this style to restrict hover to only the drop down menu items.

  .menu-item li:hover {
      background: #94f0d8 ;
  }

• 

  staff-happychia · Staff · Jan 25, 2015 at 1:27 am

  • Copy link

  Let’s try this:

  Make the padding around the top level menu items even:

  .main-navigation li {
  	padding:1em 1em 1em 1em;
  }

  Then add hover style:

  .main-navigation li:hover {
      background: #94f0d8 ;
  }

• 

  belleweatherfarm · Member · Jan 28, 2015 at 2:17 pm

  • Copy link

  Thank you SO much, chaitanyamsv, just had a chance to try it! I’m very pleased, now people can tell which page they’re actually navigating to :)