Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

different background color for each tab in main navigation


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 28, 2012, 12:09 AM
keighdesign
 
3 posts · Dec 2011
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!
  #2  
Old Mar 28, 2012, 05:23 AM
juggledad's Avatar
juggledad
 
22,374 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 28, 2012, 09:25 AM
keighdesign
 
3 posts · Dec 2011
Quote:
Originally Posted by juggledad
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!
  #4  
Old Mar 28, 2012, 02:06 PM
juggledad's Avatar
juggledad
 
22,374 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
I want to change location of main navigation JDesignSphere Atahualpa 3 Wordpress theme 4 Oct 29, 2010 11:33 AM
[SOLVED] Too much red background at top - how to move main body w/white background hi Andante Header configuration & styling 2 Dec 18, 2009 05:25 AM
changing the background color of the main menu widget tenn10 Sidebars & Widgets 1 Oct 27, 2009 01:06 PM
[SOLVED] Main Navigation - making pages menu bigger and bolder leifkendall Header configuration & styling 6 Oct 2, 2009 08:17 AM
How do I change the menu navigation and add 'featured' post to main page? sspeedy Page & Category Menu Bars 2 Aug 19, 2009 08:03 AM


All times are GMT -6. The time now is 09:13 PM.


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