Jump to content

Style the active link underline in header

Go to solution Solved by tuanphan,

Recommended Posts

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!

Kind regards,


Link to comment
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!

Kind regards,


Link to comment
  • 10 months later...
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?

Screenshot 2024-04-11 at 00.08.05.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.