Jump to content


Photo

How to change the menu's active color


  • Please log in to reply
7 replies to this topic

#1 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 29 January 2012 - 10:35 AM

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/

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 January 2012 - 05:05 PM

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

#3 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 29 January 2012 - 11:29 PM

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; }

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 January 2012 - 11:44 PM

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.

#5 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 30 January 2012 - 06:49 AM

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

#6 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 30 January 2012 - 07:30 AM

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....

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 16524 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 30 January 2012 - 11:30 AM

Add this to your Custom Code > CSS Rules:

 .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;
	}

Remember to change the color code to your preferred color.

#8 scoop

scoop

    Super Member

  • Members
  • 207 posts
  • LocationHK/USA
  • Framework Version:2.3.8
  • Country: Country Flag

Posted 31 January 2012 - 05:51 AM

Thank you Danny - that was amazing!!