Jump to content
Sign in to follow this  
max34061

Changing colour of current page indicator on main navigation

Recommended Posts

max34061

Hi Using platform pro. When you click on the main navigation and visit a page, the background to that link turns pale grey. How can I change the grey to a different colour (orange in my case) fmpAg.gif My website is http://www.lavapr.co.uk/blog Thanks in advance Matt

Share this post


Link to post
Share on other sites
cmunns

You'd modify this selector ` .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:none repeat scroll 0 0 #F7F7F7; } `

Share this post


Link to post
Share on other sites
max34061

Hi Adam, Thanks for the quick reply. I've got the background colour set - but the text is black and a bit harsh on the eye. How do I turn it white? So not this: vlVVR.gif but this when you've clicked that link and are on that page: mn25d.gif Thanks in advance. The site is http://www.lavapr.co.uk/blog and the current custom css is: body{ font-family:Arial, Helvetica, sans-serif;; } .font-highlight, h1, h2, h3, h4, h5, h6, #nav{font-family:Arial, Helvetica, sans-serif;} #footer { background: #FF5800; } #branding .content-pad { padding:5px 0; } #primary-nav li a { font-family:Arial, Helvetica, sans-serif; font-size:1.0em; color:#000000; font-weight:bold; line-height:1.2em; padding:3px 5px; text-decoration:none; text-transform:capitalize; } #primary-nav .main-nav li a:hover { background:none repeat scroll 0 0 #FF5800; font-family:Arial, Helvetica, sans-serif; font-size:1.0em; color:#FFFFFF; font-weight:bold;} #primary-nav. main-nav li.current_page_item a, .main-nav li.current_page_item ul a { background:none repeat scroll 0 0 #FF5800; } .nav ul li a:hover { background:none repeat scroll 0 0 #FF5800; color:#FFFFFF; text-decoration:none;} #feature_slider .fcontent { width:100%; } #primary-nav li a { padding:3px 13px; border-left:1px solid #EEEEEE; } #primary-nav li:first-child a { border-left:none; } .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:none repeat scroll 0 0 #FF5800; }

Share this post


Link to post
Share on other sites
bryan-hadaway

Simply update Adam's code to: ` .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 { color:#fff; background:none repeat scroll 0 0 #F7F7F7; } ` Thanks, Bryan

Share this post


Link to post
Share on other sites
max34061

Thanks for replying. I tried updating the code and it's not worked. The text is still black not white when you're on that page. Any ideas? Matt

Share this post


Link to post
Share on other sites
cmunns

It would be `#primary-nav li.current_page_item a {color:#FFF;}`

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  

×