Style the active link underline in header

Hey awesome people,

I've been trying to fix this but have had no luck so far.

I want the underline of the current page in the header to appear slightly further down than what it currently is.

Please see website: https://www.lazimdestani.com/

I have added a code that does a line effect when the navigation links are hovered. But when I hover in the current active page, this hover line that transitions appears below the original underline (the one that indicates the active page).

What I want to do is avoid seeing double lines, so I would want to either:

• Move the underline of the current page slightly further down so that when the other one appears it looks better and avoid seeing both.
• Or alternatively, fix a code so that when the current page gets hovered then the other line doesn't appear.

Hope this makes sense and I would really appreciate your help!

On 5/14/2023 at 8:03 AM, tuanphan said:

Add to Design > Custom CSS

body:not(.header--menu-open) .header-nav-item--active>a {
    background-position: 0 calc(~"100% + 1px") !important;
}

 

King! Grateful for your help!

Hi guys, is there any way for the active NAV link? Underline to sit at the bottom of the NAV head?
Effectively, where are the red liners?

On 4/11/2024 at 6:14 AM, MartinMurray said:

Hi guys, is there any way for the active NAV link? Underline to sit at the bottom of the NAV head?
Effectively, where are the red liners?

To achieve this we will need to adjust height of header and all elements inside header. If you share site url, we can check easier

Cool...
https://swan-oarfish-hpmr.squarespace.com/

On 4/23/2024 at 11:02 PM, MartinMurray said:

Cool...
https://swan-oarfish-hpmr.squarespace.com/

What is password?

On 4/25/2024 at 11:56 AM, tuanphan said:

What is password?

Design01