Adjust when Mobile Nav kicks in
For many different reasons, you may wish the mobile navigation ‘hamburger’ menu to start at a larger browser width than just on mobile.
This could be when you have a larger amount of menu items on the horizontal desktop menu and it is breaking into two lines at smaller browser widths.
Or you just want the mobile hamburger menu to show on a desktop.
STEP 1
Copy and paste the below code into the Custom CSS to target the menu break width.
/* MOBILE NAV KICK IN */ @media screen and (max-width:1100px) { /* Display burger icon at all widths and align right */ .header .header-burger { display: flex; order: 2 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } .header-actions { display: none; } }
Just amend the max-width value when you want the menu to start. Be sure not to delete any brackets or semi-colons.
If you want the mobile menu to appear at desktop browser widths, then make the max-width a massive number like (max-width:5000px)
For those who are new to this. You can add custom CSS to Squarespace to tweak the layout and add extra functionality. No coding experience needed , just copy and paste into the Custom CSS area which lives under the Pages > Website Tools area.
