How to change Color & size of the top menu bar

[coolshahab]

Hi, Thank you for the great theme, excellent job. Can you please tell me how can I make the top menu bar bottoms same size ?! I need to give the project with the same size tab bar. I tried to find it out in CSS or PHP files or find a plug-ins but could not. Also, please let me know how to change the background color of the top menu bar, Thank you in advance for your help.

Topic

[Jason Bobich]

Hello,

There are no options in the theme for what you’re asking unfortunately, and so these will be CSS customizations you’ll need to make to the theme.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

For example, here’s some CSS selectors you’ll see you can use on the main menu by using an inspector:

/* Menu wrapper */
#access { ... }

/* List item wrapping each button */
#access li { ... }

/* Menu buttons */
#access li a { ... }

And some helpful CSS properties it sounds like you’ll want to make use of:

http://www.w3schools.com/css/css_background.asp

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

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

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[coolshahab]

Thank you, I installed it but this is something I have to spend time on, As you know I am not good at CSS. Just need to make the menu same size with different color, if you send me an example of the code, I will take care of the rest. What would you do to make your menu same size in different color @ http://www.themeblvd.com/demo/swagger/
how does it work, by percentage or by pixel ?! Just put any number and color code and I will change it till I find what works for me.

[coolshahab]

Is it possible if I send you the link of my project and you will do it? I can go to PayPal and send your time then. Thank you.

[Jason Bobich]

This should get you going:

#access {
	background: #000;
}
#access li a {
	color: #fff;
	font-size: 12px;
}

And in the future if you’re needing any customizations, this is all handled through our partners at WerkPress. Here’s how to get in touch for any custom work you need done with the theme:

http://support.themeblvd.com/customizations/

[coolshahab]

Great, it works perfect, only the sub-menu color did not changed.

[Author]

Replies