How to Remove the Gap in Mobile Menu Navigation

Mind the gap.

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.

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

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;
}

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