How can I disable the hover underline in Ella theme navigation?

Store Design
, ,
1

Hey there!
I’m using Ella theme, and I’m currently facing a problem where I wanna know how can I disable the underline which appears on my navigation when I hover. Anyone got any idea how can I remove the hover underline on navigation?

Capture.JPG
Capture.JPG1904×444 42.7 KB

Store URL: https://saya.pk/

2

Hi @Moeed

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1678778774915.png
PageFlyVictor_0-1678778774915.png1600×794 164 KB

PageFlyVictor_1-1678778774935.png
PageFlyVictor_1-1678778774935.png1600×777 194 KB

Hope this answer helps.

Best regards,

Victor | PageFly

3

Hey @PageFly-Victor
Thanks for that, but the problem isn’t solved fully; the underline is still visible on sub-categories and child categories.

1.JPG
1.JPG1304×286 27.1 KB

2.JPG
2.JPG1320×304 27.1 KB

4

Hello @Moeed ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1678781339620.png
GemPages_0-1678781339620.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1678781355203.png
GemPages_1-1678781355203.png1363×894 61.9 KB

ul.site-nav li:hover a {
    text-decoration: none !important;
}
ul.site-nav li:hover a > span:before {
    height: 0px !important;
}

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

You can use the new code below to fix it
6

Hi there, none of these worked for me in Dawn theme… Any ideas how to remove underline on hover from Dawn theme?