Welcome! To use this support forum, please Login or Join Today!

   

How do you change the color of the menu and the space above the menu bar?

{name}
Rank

Total Posts: 7

Joined 2014-11-24

PM

 

I’m able to change the background of the page, but it doesn’t change the background of the header area.  And I can’t figure out how to change the color of the menu bar. This is on the Element theme.

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

The header and nav background are images which are located in the themes folder:

wp-content/themes/element-child/images/style{x}/ (depending on which style you have loaded e.g; style1).

Header Background Image:
wp-content/themes/element-child/style{x}/header_bg.png

Navigation Background Image:
wp-content/themes/element-child/style{x}/nav_bg.png

If you’re not using a child theme per your previous post then the images are located in wp-content/themes/element/style{x}. Keep in mind though, you will lose these changes on update if you’re not using a child theme.

 

{name}
Rank

Total Posts: 7

Joined 2014-11-24

PM

 

Thank you for your reply.  I am using the child theme now.

What do I need to put in to set the images as colors, rather than images?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Sure, In your style{x}.css you can change the header background image to a color by changing:

/* Optional Background for Header */

#header {
    
backgroundurl(./images/style{x}/header_bg.pngrepeat-x center top;

to:

/* Optional Background for Header */

#header {
    
background#000000;

And for the menu, change:

/* Main Menu Height, Background, and Font Size */

#menu {
    
height62px;
    
backgroundurl(./images/style1/nav_bg.pngrepeat-x center bottom;
    
font-size1.1em;
    
font-familyDroid Serif;

to:

/* Main Menu Height, Background, and Font Size */

#menu {
    
height62px;
    
background#CCCCCC;
    
font-size1.1em;
    
font-familyDroid Serif;

You might also want to remove the border image separators from the individual menu items. You can do that by removing the background property from the rule below:

/* Top Level Links */

#menu ul li a {
    
color#74130a;
    
text-shadow#e4e1d4 1px 1px 0;
    
padding0px 19px;
    
line-height58px;
    
font-weightnormal;
    
backgroundurl(./images/style1/nav_bg_bdr.pngno-repeat right center;
{name}
Rank

Total Posts: 7

Joined 2014-11-24

PM

 

Is it possible to remove only the last border image separator, but keep the rest?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Sure. First go to Appearance → Menus and select the menu you’re working on.

Next, at the top right corner of your screen click “Screen Options”.

Under “Show advanced menu properties” click “CSS Classes”.

Now, select the last parent menu item in your menu and expand it. Type in the word “last” (without quotes) in the CSS classes field.

Lastly, under the CSS you’ve been editing thus far, just add this rule:

#menu ul li.last a {
    
backgroundnone;
{name}
Rank

Total Posts: 7

Joined 2014-11-24

PM

 

Perfect!! Thanks much!!