WordPress – change menu text and background colour – How do I ?

How do I in WordPress change the menu text and background colour to a custom appearance?

wordpress change menu text background colour how do i

To change the WP menu background and text colour you will need to change your stylesheet.css in the WordPress dashboard by going through Appearance > Editor.

This will bring up your WordPress theme css sheet but you should always use a child theme when customizing your WP sites appearance.

wordpress change menu text background colour appearance style

Change Menu colour and Text colour

Below in the next section is the code you need to change the style and appearance of the themes menu.

The "/* =Menu */" is a comment so that you know what part you are working on and this does not effect your WordPress themes css.

The green colour code is the text colour you want to change.

The red colour code is the what the menu background colour will start off at the top of the menu, the colour gradient will change to the bottom of the menu as the colour code in megenta.

The easiest way to see what this means is to change them and see what happens.

Remember to copy the original css code into a notepad so you can always revert back to the original WordPress menu text and background colour and appearance.

Stylesheet css html code to change Menu and Text colour

/* =Menu */

#access a {
color: #E2ED17;
display: block;
line-height: 3.333em;
padding: 0 1.2125em;
text-decoration: none;
}

#access {
background: #1F6A07; /* Show a solid color for older browsers */
background: -moz-linear-gradient(##1F6A07, #0a0a0a);
background: -o-linear-gradient(#1F6A07, #0a0a0a);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(##1F6A07), to(#0a0a0a)); /* older webkit syntax */
background: -webkit-linear-gradient(#1F6A07, #0a0a0a);
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 100%;
}

Colour codes convertor