Jump to content

How do I prevent a huge space between my active navigation link and the underline

Recommended Posts

Site URL: http://hellololo.net

So I know what the problem is but let me explain how I got there first~   http://hellololo.net  

I wanted my active page to be underlined in then navigation and I found this amazing code on this forum: 

/* Nav active link underline */
.main-nav ul li.active-link a {
    border-bottom: 1px solid black;
    padding-bottom: 0px;

It worked just fine when the navigation and logo were centered, but when I moved the header to what it is currently, the underline got pulled down to whatever size the logo is. If I reduce the size of the logo, the underline moves closer to the navigation. If I increase the size of the logo, the line moves farther away from the navigation. 

How can I keep my logo image the size it is, while moving the underline where I need it to be? 

Thank you so much~


PS. Another size question if I may. Is there a way to keep the navigation links to the left and center the logo with social media links in the right corner? 

Navigation Underline Distance.jpg

Link to comment
  • 2 months later...
On 1/9/2021 at 11:39 AM, hellololo said:

Sorry for replying so late! my url is http://hellololo.net

Remove code & add new code

li.active-link a {
    text-decoration: underline !important;


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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.