Highlight text in navigation bar when hovering mouse over it

Store Design
1

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

1 Like
2

@Jacobwestlund

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

Thanks!

3

hello @Jacobwestlund

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

4

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

5

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;
}
4 Likes