Centric Pro CSS for menu hover background color and text hover color change

Community Forums Forums Design Tips and Tricks Centric Pro CSS for menu hover background color and text hover color change

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  David 3 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #121336

    David
    Member
    Post count: 8

    Hi,

    I have Centric Pro and am trying to find the code via firebug for the menu hover background color and text hover color change. Can anybody help with this?

    Having used WooThemes prior I knew to put the code in Custom CSS. Where do you put the “custom” code in a Genesis framework?

    Thanks.


    David
    visualvoodoo.com

    http://visualvoodoo.com
    #121351

    efuller
    Participant
    Post count: 59

    You will need to change these properties in the style.css file.

    
    .genesis-nav-menu li a:hover,
    .genesis-nav-menu .current-menu-item > a {
    	background-color: rgba(255, 255, 255, 0.1);
    	color: #fff;
    }
    

    It starts at line 1269.


    I am a web developer

    #121362

    David
    Member
    Post count: 8

    Hi thanks for responding. I think I am close. I changed it to:

    .genesis-nav-menu li a:hover,
    .genesis-nav-menu .current-menu-item > a {
    	background-color: #2BB7E2;
    	color: #dadbe0;
    }

    But that didn’t do it. In theory (at least in my head) that should change the background color to the same as the header (blue) and make the text turn light gray. I am trying to match my other website’s menu so it appears more seamless (http://gallery.visualvoodoo.com).

    Thanks for helping.

    P.S. what’s a good plugin that will show the code line that you are referencing?


    David
    visualvoodoo.com

    #121364

    David
    Member
    Post count: 8

    I changed the color to: #6d6e71; so that it would be more obvious when it was working. It also appears that when the menu is closed (vs expanded) there would be a different code…

    Thanks again!


    David
    visualvoodoo.com

    #121366

    efuller
    Participant
    Post count: 59

    I see what you are looking to do.

    So at line 1269, change the code to this:

    .genesis-nav-menu li a:hover,
    .genesis-nav-menu .current-menu-item > a {
    	background-color: none;
    	color: #dadbe0;
    }

    On line 1211, remove the ‘color: fff; ‘ property so it looks like this:

    .site-header .widget-area a,
    .site-header .widget-area a:hover {
    	
    }

    I think these changes will give you your desired result.


    I am a web developer

    #121435

    David
    Member
    Post count: 8

    Dude you are awesome. Take a look now…I really appreciate that. It will now be easier to fix the other site to match.

    THANKS!!!!


    David
    visualvoodoo.com

    #121436

    David
    Member
    Post count: 8

    Just thought of a question….when there is an update, to this theme…will this code get over-written?


    David
    visualvoodoo.com

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.