Hello! WEBSITE URL: https://www.vdigital.co/ I want to change the "hover" color of my menu and sub menu. Kindly guide, how can I do the needful. Thanks!
You can do all these things on your own. Just right click over the item you want to edit. Then click Inspect in the drop down menu. It will show you the divs and the .css of that item. Find that item in your .css file and adjust it to your liking. It's that easy.
Hello @qwikad.com I agree. I tried, but it's not working. I did exactly the same "click on Inspect" and made changes for hover on menu. For hover on menu: (this is the change I made, but it didn't show) ul.dropdown-menu li a: hover { color: #ffce00; } For hover on sub menu: I couldn't find the right div or .css. Can you please guide me to correct these? WEBSITE: https://www.vdigital.co/ (for your reference). Thanks & Regards!
This works (not fully tested). I simply added it to the top of the embedded style element rather than dig through the PoS source from the WP/theme to locate the appropriate style context. #main_menu li a:hover { color: green; } Code (markup): gary
Hi @kk5st It worked. But when I hover above or below the menu item - the changed hover color doesn't show but the previous one.
@Rashida H. try this #main_menu>li .sub-menu li>a:hover { color: #172d63; background: #ffce00; } Code (CSS): just change the color to your choice... the hover should works on first and second level of sub-menu.
Hello @alfieindesigns Thank you so much for the help. The hover color on the sub menu has changed and so is the menu hover color. But I am still having a slight issue with the menu hover color - It has changed to the my desired color #ffce00 but when I move my mouse little above or below the menu (about, services and contact) - it still shows the "blue" color. How can I change that? Kindly advise. Much appreciated. Regards!
The LI element has padding which creates space around the A element. See the minimal test case below. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1em; } p { font-size: 1em; } #wrapper { margin: 0 auto; max-width: 65em; } h1 { font-family: serif; margin-bottom: 0; text-align: center; } /* end boilerplate */ ul#main-menu, ul#main-menu li { display: table; margin: auto; padding: 0; } ul#main-menu li a { background-color: orange; color: blue; display: inline-block; padding: 1em; } ul#main-menu li a:hover { background-color: blue; color: orange; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <h1> :hover over entire container </h1> <ul id="main-menu"> <li> <a href="#">item 1</a> <ul> <li> <a href="#">item 1a</a> </li> </ul> </li> </ul> </div><!-- end wrapper --> </body> </html> Code (markup): gary
Hello, Here's complete code for those. /* stay hover state color on menu */ #main_menu>li:hover > a { color: #ffce00; } /* hover bg and color of sub menu */ #main_menu>li .sub-menu li>a:hover { color: #172d63; background: #ffce00; } Code (CSS):