Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

different background color for each tab in main navigation


  #1  
Old Mar 27, 2012, 11:09 PM
keighdesign
 
3 posts · Dec 2011
Colors 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!
  #2  
Old Mar 28, 2012, 04:23 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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, 08: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, 01:06 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 10: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 04:25 AM
changing the background color of the main menu widget tenn10 Sidebars & Widgets 1 Oct 27, 2009 12:06 PM
[SOLVED] Main Navigation - making pages menu bigger and bolder leifkendall Header configuration & styling 6 Oct 2, 2009 07: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 07:03 AM


All times are GMT -6. The time now is 03:18 PM.


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