• 0
Sign in to follow this  
Followers 0

How to change the menu's active color

Question

Posted · Report post

Starting a new discussion because my old title was misleading. Want to buy PageLines but there is no point if I can't change something this simple - am new thinking that due to the shape of the active link - it may be an image that I am trying to get rid of or turn white...help please ...http://demo.pagelines.com/scoop/

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

You can change the menu's active color easily using CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What do I put in Catrina? If I could just get to the css maybe I could change it but this is what I have in my custom code right now... and nothing is changing it....have both nav-main & brandnav as I was switching back an forth... much of htis was to get all on the bottom of the header section... is there something I should be uncommenting to get it to work? body{} .sf-menu li, .main_nav ul.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color:ffffff; } #branding .mainlogo-link, #branding .mainlogo-img { float:right; padding-bottom: 0px; margin-bottom: -50px; } #branding .mainlogo-link, #branding .mainlogo-img { float:right; padding-bottom: 0px; margin-bottom: -50px; } #brandnav .mainlogo-link, #brandnav .brandnav-img { float:right; } #brandnav .mainlogo-link, #brandnav .brandnav-img { padding-bottom: 0px; } } #brandnav .content-pad { padding-bottom: 0; } #branding .content-pad { padding-bottom: -80px; padding-top: 10px; } #brandnav .mainlogo-link, #brandnav .brandnav-img { float: right; margin-top: 90px; margin-bottom: 0px; } #brandnav .brandnav-nav { margin-top: 200px; float: left; margin-bottom: 0px; } #brandnav ul#menu-main-menu li.menu-item a:hover { background-color: #ffffff !important; } {background-color:#ffffff !important;} .main_nav .main-nav li a:hover, #grandchildnav .current_page_item a, #grandchildnav li a:hover, #grandchildnav .current_page_item ul li a:hover, .sf-menu li:hover, .sf-menu li.sfHover { background-color: #ffffff; color: #135C60; } /* THIS ALLOWS YOU CHANGE THE BACKGROUND COLOR OF THE LINK WHEN YOU HOVER OVER IT */ #secondnav li a:hover { background: #FFFFFF; } /* THIS ALLOWS YOU TO ADD A UNDERLINE WHEN HOVERING OVER THE LINK */ #secondnav li a:hover { text-decoration: underline; } /* THIS ALLOWS YOU TO CHANGE THE COLOR OF THE LINK WHEN HOVERING OVER THE LINK */ #secondnav li a:hover { color:#135C60; } /* CSS FOR ACTIVE MENU ITEM, USEFUL FOR DROP DOWN MENUS */ .main-nav li.current-page-ancestor a:active, .main-nav li.current_page_item a:active, .main-nav li.current-page-ancestor ul a:active, .main-nav li.current_page_item ul a:active { background-color: #FFFFFF; color: #135C60; } /* CSS FOR CURRENT PAGE MENU ITEM */ .main-nav li.current-page-ancestor a,{ background-color: #FFFFFF; color: #135C60; } .main-nav li.current_page_item a, { background-color: #FFFFFF; color: #135C60; } .main-nav li.current-page-ancestor ul a, { background-color: #FFFFFF; color: #135C60; } .main-nav li.current_page_item ul a.sf-menu li li { background-color: #FFFFFF; color: #135C60; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think you should get Firebug for Firefox which helps identify each CSS element and provides you with the code which you can test live on your site or even your demo. http://www.getfirebug.com There doesn't seem to be anything in the code above that is commented out except instructional information. Uncommenting that would not do anything to help your site, but might cause it harm.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Have Firebug did not seem to be working for me - using the demo.... will try it again...thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Have Firebug did not seem to be working for me - using the demo.... will try it again...thanks.... firebug is not helping very hard to get around the admin bar - and when I do - I cannot find a current page marker in the css that would allow me to change it....

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Add this to your Custom Code > CSS Rules: [code].main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a { background: #222; }[/code] Remember to change the color code to your preferred color.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you Danny - that was amazing!!

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  
Followers 0