change navigation colour

[mon1]

Hi Can you please tell me how I can change the navigation colour, many thanks

Topic

[mon1]

Hi Can you please let me know how I can change the font size in the navigation, thanks

[Jason Bobich]

Hello,

All available style options for this theme can be found at Appearance > Theme Options > Styles in your WordPress admin panel.

Can you please tell me how I can change the navigation colour

Within the theme’s style options, there are twelve options you can choose under the “Menu Color” option.

Can you please let me know how I can change the font size in the navigation

Unfortunately there is no option in the theme to change the main menu’s font size. You’d need to do this through your CSS customizations.

[mon1]

Hi Thanks for confirming I thought it may be a case of adding some code into the CSS but I have looked using Firebug and added some CSS but it’s not working can you please do me a big favour by suppling what code I would need to add to the CSS to change the navigation text size and the colour of the nag, this will help me understand what I need to do.

This is the second time I have bought this theme as I love it so much so I would really appreciate your time and help.

THANK YOU ;o)

[Jason Bobich]

Let’s try to figure out what selector you could use. — Open up Firefox, and inspect one of the buttons with Firebug. Make sure the anchor <a> of one of the buttons is selected on the HTML view (left side) of firebug. Now, what do you see at the top of the right side that would be the highest priority selector you could use?

Click to enlarge

And then once you’ve got your selector you can use whatever properties in there you want like font-size, color, etc.

http://www.w3schools.com/cssref/pr_font_font-size.asp

http://www.w3schools.com/cssref/pr_text_color.asp

[mon1]

Thanks for your help Jason but I am still not sure what CSS code I need to add to make these changes (navigation colour change and nag font size) I have tried several ways looking at what you have sent me and still can’t get it to work. Can you please help me do this.

I can’t send you a screenshot so here is the link to the website, cheers

http://217.199.187.64/thrapstonfarmandgarden.co.uk/

Appreciate your help on this :o)

[Jason Bobich]

I know you can do it. You’re going to have put in some effort and learn how CSS works to make these kinds of customizations. Let’s look at the basic of how CSS is setup. I’m not hanging you out to dry, or anything; I’m right here with you. But I’m not just going to give it to you, because then it’s not going to help you the next time you want a customization.

You have:

1. Selectors — The HTML element you’re targeting
2. Properties — The thing you are changing, i.e. font, color, etc.
3. Values — And the value of the property you’re changing

.selector {
	property: value;
	property: value;
	property: value;
}

So, using Firebug, we already found your selector. Look at the red square I made in the screenshot on the right side. Then, I’ve told you that use want to use the “font-size” and “color” which I linked you to articles documenting how to use them and what values you can use. So, how do you think you might structure this all together?

[mon1]

Hi Jason

I really appreciate your help and advice and also your patience and time.

I have managed to change the font size yippee. The only thing I am struggling with now is changing the background colour of the navigation, I can’t seen to find the element. Can you point me in the right direction please. I have right clicked on the nav background and tried lots of variations?

This is what I used to do the font size and it worked – I need to get someone to come train me on CSS I think:

#main-menu .sf-menu li a {
	font-size: 10px;
}

Thanks again for your help much appreciated :o)

[Jason Bobich]

Do you mean you’re trying to change the entire menu bar to some custom color that’s not one of the included ones? That’s going to be a pretty big job. You’ll need to re-create the images from the included Photoshop files, upload those to your child theme, and reference them from your own custom CSS.

Here’s more of an explanation on this: http://support.themeblvd.com/forums/topic/changing-colors-in-themes/#post-11852

Note: In that explanation it’s talking about the “flip” style menu, but you’re using the “classic” style menu.

[Author]

Replies