Jump to content
Sign in to follow this  
rpacker

Secondary Navigation Background and Text Color

Recommended Posts

rpacker

I have successfully formatted the main navigation text, background and hover color on my site, but am unable to apply the formatting to my secondary navigation. Here is the URL: http://www.postrealityshow.com/who-am-i/ The following is the CSS custom code I am using for the primary navigation, which could probably be cleaned up a little since it was cobbled together from different sources. How could this be applied to secondary navigation? /* CSS FOR MAIN MENU */ .main-nav li.current-menu-item a, .main-nav li.current-menu-ancestor a, .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: #3300ff; } .main_nav li a { font-weight: bolder !important; } .main_nav li a { font-size: 13px !important; } .main_nav li a { color: #cc0000; } .main-nav li a:hover, .main-nav .current-menu-ancestor .current_page_item a:hover, .main-nav li.current-menu-ancestor ul a:hover { background-color: #cc0000; color: #ccc; } Thanks for your help.


Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
Please use the following CSS: [code]/* SECONDARY MENU LINK */ .secondnav_menu li.menu-item a {} /* SECONDARY MENU LINK HOVER */ .secondnav_menu li.menu-item a:hover {} /* SECONDARY MENU LINK ACTIVE PAGE */ .secondnav_menu li.current_page_item a {} /* SECONDARY MENU LINK ACTIVE PAGE HOVER */ .secondnav_menu li.current_page_item a:hover {}[/code]

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
rpacker
Catrina, that didn't work, I don't see any different in the secondary menu. http://www.postrealityshow.com/who-am-i/

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
Replace the code for the normal link with this code instead (if this one works then the CSS selectors for the other code can be changed): [code]ul#menu-who-am-i-menu .secondnav_menu li.menu-item a {color: #XXXXXX !important; background-color: #XXXXXX !important;}[/code]

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
rpacker
I tried this and it didn't work, but I'm not clear on your instructions, do I replace all of the previous code you gave me or just part of it?

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
Just the code for this (which is what I gave you the first time): [code].secondnav_menu li.menu-item a {}[/code] It's probably an issue with the selector so I want to make sure the right selector is before it's applied to the other 3 pieces of code for the other link properties.

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
rpacker
OK, I think I understand what you want replaced. I am now using the following, but I still don't see any changes: /* SECONDARY MENU LINK */ menu .secondnav_menu li.menu-item a {color: #333333 !important; background-color: #333333 !important;} /* SECONDARY MENU LINK HOVER */ .secondnav_menu li.menu-item a:hover {} /* SECONDARY MENU LINK ACTIVE PAGE */ .secondnav_menu li.current_page_item a {} /* SECONDARY MENU LINK ACTIVE PAGE HOVER */ .secondnav_menu li.current_page_item a:hover {}

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
Instead of this: [code]menu .secondnav_menu li.menu-item a {color: #333333 !important; background-color: #333333 !important;}[/code] It should be this: [code]ul#menu-who-am-i-menu .secondnav_menu li.menu-item a {color: #333333 !important; background-color: #333333 !important;}[/code]

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
rpacker
It's still not working. I am using Pagelines 2.1.1, could that have anything to do with the problem? I am beginning to think I should abandon the secondary menu if it is this complicated just to change the colors!

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
I don't think it's an issue with the theme, but with the code. The CSS attributes are correct (the color and background color properties), but for some reason the selectors aren't working. We'll get it another try: [code]#secondnav .nav-secondnav li.menu-item a {color: #333333 !important; background-color: #333333 !important;}[/code]

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
rpacker
Still not working. You know it's strange, but I just remembered it was working last week with the following code: #secondnav ul{padding-bottom:10px !important;float:none !important;text-align:center; margin: 0 auto !important;} #secondnav {font-size: 1.em;} .secondnav_menu .current-menu-item {background:#e8e8e8;} I just tried these scripts again as well, and they don't work any longer. Mysterious!

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
rpacker
I'm going through some other previous scripts and this one does work: #secondnav ul {padding-left: 17px; padding-bottom:10px !important;float:none !important;text-align:center; margin: 0 auto !important;

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

Share this post


Link to post
Share on other sites
catrina
Okay, thanks for posting. Try this code (for the normal links): [code]#secondnav ul li.menu-item a {color: #333333 !important; background-color: #333333 !important;}[/code]

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
rpacker
Great! This worked perfect for the text and background color. How do I adapt this script for hover, etc?

Randall Packer

Multimedia Artist & Educator

http://www.randallpacker.com

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  

×