- This topic has 4 replies, 3 voices, and was last updated 7 years, 4 months ago by Mahesh.
-
AuthorPosts
-
December 24, 2016 at 4:54 pm #105837itsamiroParticipant
What’s the best way to change the menu background color when you hover over submenu items? It’s not in the custom color option, and I’ve tried editing the CSS, but I’m missing something.
Here’s the url: madfanatics.com – current default color is set to #444
Thanks!
December 25, 2016 at 7:09 pm #105879PratikKeymasterHi @itsamori,
I have forwarded the ticket to our CSS expert. He will reply to you soon.
Regards,
PratikDecember 26, 2016 at 9:29 am #105900MaheshKeymaster@itsamiro: Please use the following CSS:
.nav-primary .menu .sub-menu a:hover, .nav-primary .menu .sub-menu a:focus, .nav-primary .menu .children a:hover, .nav-primary .menu .children a:focus { background-color: #ff00ff; }
Note: Use the color as desired.
Regards,
MaheshDecember 27, 2016 at 12:02 am #105913itsamiroParticipantHi @mahesh – I’m not sure what I’m doing incorrectly. I added the CSS both in the style sheet, as well as the CSS field in the theme customization option in wordpress, and it’s not having the desired affect.
I did change the color hex code as well.
Can you take a look? madfanatics.com
December 27, 2016 at 3:50 pm #105939MaheshKeymaster@itsamiro: You’ve some CSS as below somewhere in you Custom CSS:
.nav-primary .menu a { background-color: #000000; color: #ffffff; } .nav-primary .menu li a:hover, .nav-primary .menu li a:focus, .nav-primary .menu li:hover > a, .nav-primary .menu li:focus > a, .nav-primary .menu .current-menu-item > a, .nav-primary .menu .current-menu-ancestor > a, .nav-primary .menu .current_page_item > a, .nav-primary .menu .current_page_ancestor > a { background-color: #000000; color: #0087b5; } .nav-primary .menu .sub-menu a, .nav-primary .menu .children a { background-color: #000000; color: #ffffff; } .nav-primary .menu .sub-menu a:hover, .nav-primary .menu .sub-menu a:focus, .nav-primary .menu .children a:hover, .nav-primary .menu .children a:focus { background-color: #444444; color: #e8554e; }
Please remove this. Or use !important in the above like this.
.nav-primary .menu .sub-menu a:hover, .nav-primary .menu .sub-menu a:focus, .nav-primary .menu .children a:hover, .nav-primary .menu .children a:focus { background-color: #fff !important; }
Regards,
Mahesh -
AuthorPosts
- The topic ‘Change Menu Hover Background Color’ is closed to new replies.