Add hover color to navigation menu

• 

  serealities · Member · Feb 18, 2016 at 3:25 pm

  • Copy link
  • Add topic to favorites

  How can I add a hover color to menu items in the Elemin theme?

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

• 

  staff-jeanpierreac · Staff · Feb 18, 2016 at 3:59 pm

  • Copy link

  Hi there!

  Your menu items can be pointed by ‘#access li a’ selector. So you can use this + :hover. In this case you would need to add !important to the end of the property value.

  #access li a:hover {
      color: red !important;
  }

  Hope this helps!

• 

  serealities · Member · Feb 18, 2016 at 4:41 pm

  • Copy link

  Thanks!! If I want to use a hex code, where would I put that in this CSS?

• 

  serealities · Member · Feb 18, 2016 at 4:43 pm

  • Copy link

  Also, if I want a different hover color for each menu item using different hex codes, what is the CSS pattern for that?
  Thanks!

• 

  staff-jeanpierreac · Staff · Feb 18, 2016 at 4:46 pm

  • Copy link

  Hi there!

  You can use a tag to define colors (‘red’), or decimal values from 0 to 255 (‘rgb (255,0,90)’) or hex values. In this case, it is defined starting by # character. For instance:

  color: #ff00aa;

  Hope this helps!

• 

  serealities · Member · Feb 18, 2016 at 5:24 pm

  • Copy link

  Also, if I want a different hover color for each menu item using different hex codes, what is the CSS pattern for that?
  Thanks!

• 

  serealities · Member · Feb 18, 2016 at 5:25 pm

  • Copy link

  Is there CSS that will allow me to reduce the height of my navigation bar as much as possible?

• 

  thesacredpath · Member · Feb 18, 2016 at 7:59 pm

  • Copy link

  To reduce the navigation add a
  padding-top:0;
  to your #access CSS rule. I notice you have several #access rules. To keep things easier to find and clean, I would suggest combining all of them into one. Also add the following to reduce the menu height even further.

  #access li a {
      line-height: 1em;
  }

  For the menu items, if you want a different hover color for each, you have to create separate CSS rules for each using the unique menu item CSS id, which can be found by viewing the source code or using the web inspector in your browser. You would have to remove this rule from your CSS.

  #access li a:hover {
      color: #e25f25 !important;
  }

  Here would be the code for Binge.

  #access #menu-item-2533 a:hover {
      color: #09ff00 !important;
  }

  You can use this as a guide and use the web inspector in your browser to find the unique menu item ids for the other menu items.

• 

  serealities · Member · Feb 18, 2016 at 8:47 pm

  • Copy link

  Thanks! You answered exactly what I asked. What if I wanted to have each menu item be a different color (not hover)?

• 

  serealities · Member · Feb 18, 2016 at 8:59 pm

  • Copy link

  Yay! I figured it out myself! Many thanks!!

• 

  thesacredpath · Member · Feb 18, 2016 at 9:07 pm

  • Copy link

  Hooray and you are welcome.