How to Remove the Gap in Mobile Menu Navigation

CSS
remove mobile menu gap in Squarespace

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.

squarespace 7.0 split navigation

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

 
Squarespace 7.0 mobile navigation gap
 

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 in squarespace 7.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:

 
removed gap in squarespace 7.0 mobile navigation
 
 
Previous
Previous

3 Easy Hacks for Freelancers to Save Time (and Money!)

Next
Next

Changing the Newsletter Block Button Font