Changing hover colors in sub menu in Foundation Theme

Support Area Forums Foundation Changing hover colors in sub menu in Foundation Theme

Viewing 7 posts - 1 through 7 (of 7 total)
URL to the page in question:
  • Author
    Posts
  • #6635
    Dale Eby
    Participant

    Hi Bill,

    I am hoping this is an easy question to answer today.

    I am trying to change the submenu button colors (when a person is hovering over the button) to match the main menu menu buttons colors (when a person is hovering).

    I have looked in the styling under theme options and there is not specific place to specify color hover colors for sub menu just for text in sub menus.

    The one area I did setup with color would seem to be for the whole website, although it does not affect the sub menus.

    If you needed an example on http://www.daleeby.com => Our Products=> Then the submenu.

    The Products highlight in Lavender color, submenu is in grey.

    Thank you for your help.

    #6643
    Bill Robbins
    Moderator

    Dale,

    Great question. I don’t believe I have a built in way to edit the drop down color–I need to add that in the next update. You can paste this in the Custom CSS box on the styling tab of the theme options page thought to make the changes.

    
    .menu li ul {
    	background-color: #474747;
    }
    
    

    That will change the background color

    
    .menu li li a, 
    .menu li li a:visited {
    	color: #fff;
    }
    

    That will change the link color

    
    .menu li li a:hover {
    	color: #ccc;
    }
    

    That will change the color of the hover state

    If you run into any trouble, just let me know.

    Have a great week,
    Bill

    #6652
    Dale Eby
    Participant

    Thank you for your response.

    I was not sure if I was supposed to use all 3 of them at once or individually to get the hover color to change. So I tried them all at once.

    That did not work as a group to change the hover color in the sub menu. The first 2 options did work individually, the 3rd choice which is the one I believe I needed, which was to change the hover color of the sub menu did not work, it only changed the color of the lettering, to my desired color of lavender, and not the button itself in the sub menu.

    Did I understand your directions right?

    Thank you again.

    #6653
    Bill Robbins
    Moderator

    So you’re looking to change the background color not of the drop down container, but the hover state background color, right?

    To do that, you can use this snippet (it’s the same selector as above just with the background):

    
    .menu li li a:hover {
    	color: #ccc;
    	background-color: #000;
    }
    

    In this instance that would make the background black and the lettering silver when hovering over a drop down menu item.

    See if that’s what you’re looking for. If it isn’t, just let me know,
    Bill

    #6654
    Dale Eby
    Participant

    Thanks Bill! This is exactly what I needed. I appreciate the help.

    I have one last question on this topic, and it is just cosmetic.

    When you hover over the buttons on the top menu of the foundation theme they have a rounded corner and not square.

    The changes you provided to me give me exactly the colors I need for the sub menu when you hove, although the buttons when you hover are square and not rounded like the top menu.

    Is this something easy to change?

    I do not want to create extra work. I was just curious if it was easy to do, as it would maintain the consistency of the look of the site.

    Thank you Bill.

    #6657
    Bill Robbins
    Moderator

    Dale,
    No problem at all. You can make those round. Instead of the last snippet above, use this instead:

    
    .menu li li a:hover {
    	color: #ccc;
    	background-color: #000;
    	-moz-border-radius: 6px;
    	border-radius: 6px;
    }
    

    If you’d like to also have the shadow from the top too, it would be like this:

    
    .menu li li a:hover {
    	color: #ccc;
    	background-color: #000;
    	-moz-border-radius: 6px;
    	border-radius: 6px;
    	-webkit-box-shadow: 0px 1px 3px #141414;
    	-moz-box-shadow: 0px 1px 3px #141414;
    	box-shadow: 0px 1px 3px #141414;
    }
    

    I hope that helps and I hope you enjoy your holiday,
    Bill

    #6658
    Dale Eby
    Participant

    Thank you Bill. Worked perfect

    Have a great 4th of July.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Changing hover colors in sub menu in Foundation Theme’ is closed to new replies.