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
  • Replies 5
  • Views 1.1k
  • Created
  • Last Reply
  • 2 months later...


This topic is now archived and is closed to further replies.

  • 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.