Underlining Menu Nav of Dropdown

Hi there,

Currently I am able to get my dropdown pages underlined but the main page link at the very top of the menu nav doesn't underline with hover.

Is there a code fix for this?

Thanks!

Hi,

What is site url? We can check easier

@tuanphan

Site is https://rutherford-prebuild.squarespace.com/

access pw: ruthcon23

Any insight on this?

@tuanphan is this feature a possibility in SS?

Just an underline or same underline effect like as dropdown items? Use this CSS code

div.header-nav-item>a:hover {
    text-decoration: underline;
}

On 8/3/2023 at 5:11 AM, tuanphan said:

Just an underline or same underline effect like as dropdown items? Use this CSS code

div.header-nav-item>a:hover {
    text-decoration: underline;
}

 

Thank you works.  What would be the code to have the same underline effect where it hovers across as the others?

On 8/7/2023 at 4:27 AM, tuanphan said:

Remove code I sent & use this new code

div.header-nav-item>a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0.1em;
    background-color: currentColor;
    transform: scalex(0);
    transform-origin: right;
    transition: transform .6s cubic-bezier(.19,1,.22,1);
}
div.header-nav-item>a:hover:before {
    transform: scalex(1);
    transform-origin: left;
}
div.header-nav-item>a {
    text-decoration: none !important;
}

 

Amazing!! Thank you so much this was a huge help 🙂