Changing hover colors in sub menu in Foundation Theme
Support Area › Forums › Foundation › Changing hover colors in sub menu in Foundation Theme
- This topic has 6 replies, 2 voices, and was last updated 11 years, 9 months ago by Dale Eby.
-
AuthorPosts
-
June 29, 2012 at 15:43 #6635Dale EbyParticipant
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.
July 2, 2012 at 12:02 #6643Bill RobbinsModeratorDale,
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,
BillJuly 2, 2012 at 13:25 #6652Dale EbyParticipantThank 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.
July 2, 2012 at 16:04 #6653Bill RobbinsModeratorSo 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,
BillJuly 2, 2012 at 19:56 #6654Dale EbyParticipantThanks 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.
July 3, 2012 at 10:34 #6657Bill RobbinsModeratorDale,
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,
BillJuly 3, 2012 at 11:09 #6658Dale EbyParticipantThank you Bill. Worked perfect
Have a great 4th of July.
-
AuthorPosts
- The topic ‘Changing hover colors in sub menu in Foundation Theme’ is closed to new replies.