Underline Menu Text When Cursor Hovers It -Horizon Theme

Technical Q&A
,
1

Hello I am trying to make it so that the menu text gets highlighted whenever the cursor hovers over the text, how do i do this?

2

Hey @Captainsales8

Welcome to the community! Can you share your store URL and Password (if enabled)?

Also, what exactly you mean when you say you want the menu text to be highlighted? Do you want to change it’s color on hover or just add a little bit of boldness on hover or just a normal underline? Let me know.

Best,
Moeed

3

Hi Moeed, this is the URL, hjd948-hc.myshopify.com Password is pickow

I would like for the menu text, home, about us, catalog, and contact. to be underlined whenever the cursor is hovered above it. Thank you for your help!

4

Hey @Captainsales8

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.menu-list__list-item:hover {
    text-decoration: underline !important;
}
</style>

RESULT:

image
image1168×228 23.4 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed