Archived

This topic is now archived and is closed to further replies.

  • 0

Primary Nav Menu Text Color Change

Question

Posted · Report post

I would like to know the CSS I need to put to make the Primary Nav Menu Text color change to white. adding this to the custom css code is not working to make the change I want: #nav ul li a {color:#fff;} The site under development is click here to see. I have tried various selector codes but have been unsuccessful. thanks in advance!

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Ok, so I figured out the answer to my question above by adding this to the custom css: #primary-nav ul.sf-menu li a { /* ---------link font styles--------- */ color:#FFF; } BUT, now I cannot figure out how to make the hover text color and the active current page text color change to #000 Also, what is the styling to change the active and current link background colors including hover. I have tried to locate this in firebug and i have reviewed the other posts in the forum, but my amateur brain can't seem to grasp what to do.

Share this post


Link to post
Share on other sites

Posted · Report post

Here is a list of all css that is in the Main Nav for PlatformPro, I don't know what theme you are working on. Hover text is always found with the css selector 'hover' So for links, you will find the html link 'a' followed by ':hover' for hover based styling and ':active' for active based styling. You may not find what you are looking for because it may not be there. If the current theme doesn't have an active style in place, then you need to create it. Here are some examples from PlatformPro, if you have a different theme, then DON't copy/paste these....you need to tweak yours. If you are on a Mac, I suggest you get CSSEdit, this saves you enormous amount of time working with css styling...especially digging into other's work. FYI! /* @ Main Nav found in theme.css but can be over ridden in the custom code section of your theme settings */ /* this style is adding a border, keep in mind for color changes */ #primary-nav #nav_row {border-bottom: 1px solid #eee;} /* this style is setting the color, but keep an eye on font-weight for your custom color */ #primary-nav li a{ color: #777; line-height: 1.2em; padding: 10px 15px 10px; text-decoration: none; display: block; border: 1px solid transparent; border-bottom:none; font-weight: lighter; font-size: .8em; text-transform: uppercase; letter-spacing: .04em; } /*IE6 border color (transparent border fix)* -- also keep an eye on this when changing colors/ *html #primary-nav li a{border-color: white;} /* here is the hover color for the links in the nav bar */ #primary-nav .main-nav li a:hover{background: #F1F1F1;} /* this is how active works, this is for the subnav, if you need to add a style for your active link then follow this formula */ #subnav ul li a:active{color:#000;text-decoration:none;}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks for the help. I need to still get a better understanding how to adjust the active page menu color, specifically I desire to get the active background to be: #657383 and the text color to be: #2B3856. FYI I have Headway Themes as well and this task is straightforward in the Admin. I love the Platform Pro and plan to stick to it, but I just wish there was a easier way to style color on multiple elements of Platform Pro. thanks and I look forward to finding the way to make this change.

Share this post


Link to post
Share on other sites

Posted · Report post

the current_menu_item and current_page_item are at your disposal to change the active page menu backgrounds. and this should get you what you want

	.main-nav li.current_page_item ul a {
	background: #657383;
	color: #2B3856;
	}
	

Share this post


Link to post
Share on other sites

Posted · Report post

Eduardo, I put that css in the custom css and I am still not getting the result needed. See the site: http://cshmedia.com

Share this post


Link to post
Share on other sites

Posted · Report post

I went in and edited the theme.css file directly, so I guess when I need to upgrade in the future I may need to fix again. Is that right?

Share this post


Link to post
Share on other sites

Posted · Report post

Yes, you will have to. Just keep that in mind when you upgrade.

Share this post


Link to post
Share on other sites