MENU COLOR

• 

  conejopepper · Member · Oct 9, 2013 at 5:10 pm

  • Copy link
  • Add topic to favorites

  Is there a way to change the color for each section on my menu?

  http://blablamagazine.com/

  Also, is there a way to change the color of the dropdown menu for “AGENDA CULTURAL”

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

• 

  thesacredpath · Member · Oct 9, 2013 at 10:34 pm

  • Copy link

  What you will need to do is to target each menu item by menu item ID. As an example, looking in the source code for your site, I find that the menu item ID for your “Agenda Cultural” menu item is “menu-item-292” so to change the background color and/or font colors for that menu item, you would add the following CSS and edit the color codes as desired.

  li#menu-item-292 a {
      background: #CC0000;
      color: #1900DD;
  }
  
  li#menu-item-292 a:hover {
      background: #1900DD;
      color: #CC0000;
  }

  If you also wished to change the colors for the above menu item when it is the current page, you would add this as well.

  li#menu-item-292.current-menu-item a {
      background: #8800DD;
      color: #DD8800;
  }

  To change the background color and/or font color for the submenu items, you would do the same thing. The menu item ID for “Mexico” is menu-item-287 and for “Francia”, menu-item-288 You can change those individually or together. To change them individually, you would do this:

  #menu-item-287 a {
      background: #00c3dd !important;
      color: #c4dd00 !important;
  }
  
  #menu-item-287 a:hover {
      background: #CCCCCC !important;
      color: #000000 !important;
  }
  
  #menu-item-287.current-menu-item a {
      background: #333333 !important;
      color: #FFFFFF !important;
  }

  If you wanted both submenu items to be the same background and font color, you would do this.

  #menu-item-287 a, #menu-item-288 a {
      background: #00c3dd !important;
      color: #c4dd00 !important;
  }
  
  #menu-item-287 a:hover, #menu-item-288 a:hover {
      background: #CCCCCC !important;
      color: #000000 !important;
  }
  
  #menu-item-287.current-menu-item a, #menu-item-288.current-menu-item a {
      background: #333333 !important;
      color: #FFFFFF !important;
  }

  If you want the submenu items to all be the same color regardless of location, you would use the following.

  #nav li li a {
      background: #00c3dd !important;
      color: #c4dd00 !important;
  }
  
  #nav li li a:hover {
      background: #CCCCCC !important;
      color: #000000 !important;
  }
  
  #nav li li.current-menu-item a {
      background: #333333 !important;
      color: #FFFFFF !important;
  }