Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   different background color for each tab in main navigation (http://forum.bytesforall.com/showthread.php?t=17143)

keighdesign Mar 27, 2012 11:09 PM

different background color for each tab in main navigation
 
I would like to create a color coded navigation bar (main horizontal nav) that uses a different background color for each top level page and have that color inherited by drop down sub-navs.

For example "About Us" would have an orange background. Mission/vision, etc that might be under the About Us menu would also have an orange background.

The next tab/page might be Services - with a green background and all sub-nav pages under services would also be green.

Testimonials (as a third tab) might have a blue background (and any sub level pages would inherit blue background).

Hope this makes sense!

I'm sure this can be done...just not sure how.

Any help would be greatly appreciated!

juggledad Mar 28, 2012 04:23 AM

You can do this. You will have to code a bunch of CSS selectors and rules to set the color. Each menu item has a 'class' with a unique name you can use in the CSS selector.

keighdesign Mar 28, 2012 08:25 AM

Quote:

Originally Posted by juggledad (Post 82693)
You can do this. You will have to code a bunch of CSS selectors and rules to set the color. Each menu item has a 'class' with a unique name you can use in the CSS selector.

Would I need to use Custom Menus to apply a class selector to each item? I am not sure how to go about giving each item a class - that is where my confusion lies. Any light you can shine on that part of the process would be great. I can write the css - just need to know how to get it to apply to the menu items.

Thanks!

juggledad Mar 28, 2012 01:06 PM

The class is put in weither you use the Atahualpa menus or make a custom menu. You will have to look at the source of the page to find them or use the FireBug extension in FireFox


All times are GMT -6. The time now is 11:33 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.