Changing Color of Menu

• 

  rartus · Member · Jan 9, 2015 at 7:50 pm

  • Copy link
  • Add topic to favorites

  Is there any way to individually change the color of different tabs in a menu? Like if I wanted to make one red, one green, one blue etc…

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

• 

  loopafox · Member · Jan 10, 2015 at 3:27 pm

  • Copy link

  Hi,

  Yes this is possible so long as you have the Custom CSS feature.

  I will give you an example that you may follow and apply to all the buttons on your menu. Lets start with the first menu item on your page ‘About’. We will make the background red, and when someone hovers it will be darkred, and when someone clicks it will change to darkorange.

  • The first step is to go to Appearance > Menus in the WordPress dashboard.
  • At the top right of the page, click ‘Screen Options’ and tick the box that says ‘CSS Classes’. Click here for detailed instructions
  • In your menu item ‘About’ enter ‘red’ into the CSS Class box.
  • Now add the CSS code below to your CSS editor.

    .red {
    background-color: red;
    }

    .red:hover {
    background-color: darkred;
    }

    .red:active {
    background-color: darkorange;
    }

  You can customise the colors to suit your needs. Please note You will have to do this for each menu item. To give each menu item a unique color simply assign it a unique class name, and then copy the CSS above and replace ‘red’ with your chosen class name, and then customise the background colors to suit.

  Let me know if that works for you.

• 

  lizthefair · Member · Jan 10, 2015 at 6:47 pm

  • Copy link

  That is possible with CSS (which is part of your Premium plan trial).

  To do this, you need to target each menu-item individually.

  Here is some example code:

  #menu-item-97{
  	background-color: red;
  }
  #menu-item-98{
  	background-color: green;
  }#menu-item-96{
  	background-color: blue;
  }
  #menu-item-99{
  	background-color: yellow;
  }
  #menu-item-108{
  	background-color: violet;
  }

  If you paste this in the CSS box of your customizer, you’ll see that it changes each menu item to a different color. You can make different color choices by replacing the color words I chose with hexcode colors from here:

  http://www.w3schools.com/tags/ref_colorpicker.asp

  Be sure to use the full number plus the hash sign (#454566)