highlight text in navigation bar when hovering mouse over it

Solved
Jacobwestlund
New Member
3 0 2

Hi,

I am using the Debut theme and I am having some issues with finding tutorials on how to add this and I am testing my luck to find some guidance here. I will show examples of my navigation bar and how I want my navigation bar to interact with the customer down below (example from another website). I would also like to know how to remove the lines underneath the text. I tried using a tutorial on how to use the "inspect" tool to find the code but I did not find any success. 

My store:
https://prnt.sc/12lgpl7


Example:

https://prnt.sc/12lgrnh

unfortunately you can not see my mouse hovering over "SHOP", but you can see it highlights orange. I want to have it similar but in a different color and also remove the lines underneath.

I would really appreaciate a helping hand right now.

Thanks in advance,
Jacob

dmwwebartisan
Shopify Partner
6591 1536 2003

@Jacobwestlund 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Natztech
Shopify Partner
896 242 661

hello @Jacobwestlund 

Please share your website URL and password if any. I will check and provide a solution here.

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Jacobwestlund
New Member
3 0 2

Can you help me without me sharing my password? I do not feel comfortable handing it out.

0 Likes
Natztech
Shopify Partner
896 242 661

This is an accepted solution.

hello @Jacobwestlund  

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.site-header .grid__item .site-nav li >a.site-nav__link:hover {
    color: #31cf7a !important;
}
.site-header .grid__item .site-nav li >a.site-nav__link:hover .site-nav__label {
    border-bottom: 1px solid #31cf7a !important;
}
Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store