Jump to content
Sign in to follow this  
somagoods

adding child page is changing nav bar button colors

Recommended Posts

somagoods

Hello, Please take a look at my site, http://somagoods.com/ The buttons that are now gray were once a dark blue ... until I added a child page (under "about") I have searched the discussions for the answer and haven't quite found it...It looks like the answer most often given is to activate Platform Base. I hesitate to do this because I'm worried it will mess up the site somehow ... and it doesn't seem necessary. I have been able to add the child page just fine. The only thing I need to now is tweak is the color of the nav bar buttons. Can I do this without activating Platform Base? Thanks as always for your helpful suggestions!

Share this post


Link to post
Share on other sites
Kate

Hi Jennifer- First, to address your question: The classes change a little on the li elements when the subnav is added. As a result, you would have to use the "current_page_parent" or "current_page_ancestor" class to target that link. So, it would be:

.current_page_ancestor a{color:#003C83 !important;}

Regarding Base: it won't hurt anything at all. In fact, it allows you to make customizations without altering the core framework files. ;)

Share this post


Link to post
Share on other sites
somagoods

Thank you, Kate. I activated Base so now I am able to access the base.css file. My code is not right though. Can you please take a look and see if I incorporated your code correctly? Thanks! .current_page_ancestor a{color:#003C83 !important;} #nav_row ul li a{ font-size:16px; font-family: "Gill Sans MT", "Trebuchet MS", century gothic, arial, sans-serif} #primary-nav ul li {background:#ffffff} #nav_row ul li a:hover {color:#226d8d; background-color:#ffffff} #nav_row ul li.current_page_item a { color:#226d8d; background-color:#ffffff; } #primary-nav #nav_row { border-bottom:none; }

Share this post


Link to post
Share on other sites
kastelic

Hi Jennifer, try this code:

	#primary-nav ul.sf-menu a, .sf-menu a:visited {color:#003C83}
	

Share this post


Link to post
Share on other sites
somagoods

No luck. I've tried so many variations of the codes you guys have given me, but the buttons are still gray.

Share this post


Link to post
Share on other sites
Kate

Hey Jennifer - I had actually tried it myself, and it worked. Just took a look and I see it's highlighted. I guess you're good to go now, correct?

Share this post


Link to post
Share on other sites
somagoods

Hi Kate, Thanks for taking a look and trying it yourself. The way it looks now, though, is the same as when I first posted. What I am trying to do is change the nav bar links from gray to dark blue (#003c83) - that is the way we had it before adding subnav. The blue color you see on current and hover is a lighter blue (#226d8d), and those are fine as is. The only change that needs to happen is for the gray to turn to #003c83. I tried inserting the code you provided a few different ways, and I could not get it to work so I took it out. My current code is as follows. Could you please show me where to insert your code? #nav_row ul li a{ color:#003c83; font-size:16px; font-family: "Gill Sans MT", "Trebuchet MS", century gothic, arial, sans-serif} #primary-nav ul li {color:#003c83; background:#ffffff} #nav_row ul li a:hover {color:#226d8d; background-color:#ffffff} #nav_row ul li.current_page_item a { color:#226d8d; background-color:#ffffff; } #primary-nav #nav_row { border-bottom:none; } Also, this code is in base.css. I have removed it from Platform > Settings > Custom Code. Thanks for your help!

Share this post


Link to post
Share on other sites
Kate

Oh I see... I misunderstood what you were trying to do. I apologize. Try this:

#primary-nav ul.sf-menu a {color:#003c83 !important;}
Also, change this line (that you currently have):
#primary-nav .main-nav li a:hover { background:transparent;}
to:
#primary-nav .main-nav li a:hover { background: transparent;color:#226d8d !important;}

Hopefully that's what you're looking for... If not, let us know and we can help you from there...

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  

×