Jump to content
Sign in to follow this  
jeomiland

Need navbar BG color same as page BG, prob w/Design Control

Recommended Posts

jeomiland

Hi Thanks in advance for your insights. I wish to have the header area on this site: life-rising.com be the magenta color - including the upper navigation. Got the header BG color changed and used CSS to change the nav area BG, but since the actual nav items are LI boxes, how do you get them to be that magenta color also? I've tried using Design Control and changing Box Color - Primary Elements but that changes BG in places I prefer to Not have magenta (twitter bar, box around images,...). Using Firebug, I see the nav area is: #site #page #page-canvas #header #outline #primary-nav #texture #content #content-pad #nav-row and the UL forming the nav bar has: class="main-nav nosearch sf-menu sf-js-enabled sf-shadow" and the "current" LI element has: class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-16" and the other LI Nav elements have: class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89" Also, seems #primary-nav #texture spans the whole content area while #primary-nav #texture #content spans just the individual nav LI elements. The result is there is a pixel or 2 under the nav elements that are NOT showing the magenta BG, while the area to left and right of Nav elements have that extra on bottom. So where is the best place to add some custom CSS that will handle this? And what to put for these LI and/or UL elements style code? Also need to know how to adjust the hover and "not current" BG colors for these elements. Thanks so much for your help! JEO

Share this post


Link to post
Share on other sites
catrina

You'll need to add your custom CSS to the CSS box in Settings > Custom Code. The hover background for menu items can be changed using this CSS:

ul#menu-nav li.menu-item a:hover {background-color: #COLOR;}
The "not current" background color menu items can be changed using this CSS:
ul#menu-nav li.menu-item {background-color: #COLOR;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×