Squarespace 7.1 - Navigation Folder Link on Hover

Site URL: https://preservationframer.squarespace.com/

Hi! I'm looking for some help within the navigation of this site.

When you hover over the navigation links there is an orange underline except for when you are on either of the Services pages ("Custom Framing" & "Restoration + Printing").

For example, if I'm on the "Custom Framing" page and want to navigate over to "Restoration + Printing" the orange underline animation does not appear like it did on the home page.

https://preservationframer.squarespace.com/

PW: Preservation123!

Add to Design > Custom CSS

/* Nav folder item hover underline */
div.header-nav-folder-item a:hover {
    border-bottom: 2px solid #dd7740;
}
div.header-nav-folder-item a {
    border-bottom: 2px solid transparent;
}

19 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Nav folder item hover underline */
div.header-nav-folder-item a:hover {
    border-bottom: 2px solid #dd7740;
}
div.header-nav-folder-item a {
    border-bottom: 2px solid transparent;
}

 

@tuanphanThank you! This was really helpful. I am noticing that the line is a bit thicker than the others. I reduced it to 1px but it's staying the same. Any idea what might be happening?

Try this new code

.header-nav-folder-item a:hover {
    background-image: linear-gradient(to right,#dd7740 100%,currentColor 0) !important;
    background-size: 1px 2px !important;
    background-repeat: repeat-x !important;
    background-position: 0 calc(99.9%) !important;
    white-space: initial;
}