Jump to content
Sign in to follow this  
organicman

Change Platform Pro main navigation bar background color

Recommended Posts

organicman

See this site. Client would like the Platform Pro navigation bar to have white letters over a solid strip of the same background color as the site background, which is #151B8D, just as it is in the site I referenced. I need to get this result, so how best to go about this?

Share this post


Link to post
Share on other sites
cshoffmann

Add the following CSS to the "Custom Code" in Platform Pro>Settings>Custom Code (This is all of it, so you can adjust as needed): #primary-nav {background: #151B8D;} #primary-nav li a {background: #151B8D;} #primary-nav #nav_row {border-bottom: 0px solid #151B8D;} #primary-nav .main-nav li a:hover{ background: #fff; color:#151B8D; font-weight:lighter; } .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a{ background: #151B8D; color: #fff; font-weight:lighter; } #primary-nav ul.sf-menu a, .sf-menu a:visited { color:#fff; font-weight:lighter; } #primary-nav ul.sf-menu li a { padding: 7px 15px; color:#fff; font-weight:lighter; } #primary-nav li a{ font-size: .8em; }

Share this post


Link to post
Share on other sites
organicman

This is excellent, Shaun. In case my client requires it, what would it take to make this a solid blue bar that goes from edge to edge of the site and blends right in with the blue site background? In other words, no white spaces between tabs as it shows now. The solid blue bar is the way it is on his other site, no tabs showing, and he may want that.

Share this post


Link to post
Share on other sites
bryan-hadaway

First karma point, thanks Shaun. Can we get a link of where the CSS has been added so we can further test and style it? Thanks, Bryan

Share this post


Link to post
Share on other sites
organicman

This is the site where I am using Shaun's modified CSS. I appreciate you help, too, Bryan!

Share this post


Link to post
Share on other sites
cmunns

` #primary-nav ul.sf-menu, .sf-menu * { margin-top: 10px; } `

Share this post


Link to post
Share on other sites
organicman

Fabulous, Shaun and Adam - great help! :-)

Share this post


Link to post
Share on other sites
buddhistwhatson

Hi, i used this code and it worked well, thanks. However, after the code was implemented, it moved a shortcode slider down about 5mm. Previously, the slider was quite close to the menu. The slider is just using shortcode in the content box. I tried to look with firebug, but i couldnt find out what value to adjust i would appreciate some help in the matter. thank you

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  

×