How to Remove the Gap in Mobile Menu Navigation

How to Remove the Gap in Mobile Menu Navigation in Squarespace

Mind the gap.

My latest Squarespace website is for Metro DC based SCR Interiors. SCR loved the balanced look with their logo centered on the main navigation, so we went with a Brine family template and used Primary Navigation for the area to the left of the logo and Secondary Navigation for the area to the right.

Centered logo on Brine family Squarespace template with Primary and Secondary navigation

It looked amazing on desktop, but on mobile there was an awkward gap between the Primary and Secondary navigation:

 
gap between primary and secondary navigation on Squarespace mobile menu
 

Not ideal, so I added a bit of Custom CSS to fix the display issue and remove the extra space.

 

Remove the gap on Squarespace mobile navigation

To remove the gap between Primary and Secondary Navigation on the mobile menu, just add the following code to Design > Custom CSS.

Note: this code works on Brine family templates. For other template families, YMMV.

/* remove gap in mobile nav */
.Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child {
padding-top: 0;
}
Custom CSS Menu in Squarespace

Want me to do it for you? Book me for 30 minutes and I'll take care of it, plus we'll have some time for other site updates.

Save your code. Then refresh your mobile view and you’ll see the gap is gone and the mobile menu looks like it should:

 
Mobile menu after gap is removed with Custom CSS in Squarespace
 
 

If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your site and how you used the CSS.