Mobile Menu - Font Size
The font size for the mobile menu within Squarespace is controlled via the overall font settings which may be too large for the mobile view; impacting the overall design for mobile.
To retain the font settings for the desktop menu and only change the mobile view, we can use custom code to change the mobile menu’s font.
To be able to view the changes as you make them, ensure you’ve switched to mobile view within your edit dashboard (by selecting the mobile icon at the top of the page).
The image below shows the mobile menu with the font size adjusted.
To add the custom code, follow this path with within your Squarespace website administration panel: Website Tools > Custom CSS (or use the search feature to find “Custom CSS”.
Adjust the “px” value in the code below to increase or reduce the font size from the value provided below.
Copy the code provided and save, the code is instantly applied to your site.
Designer Top Tip: add a descriptor before each code block to clearly identify what that code block is for as it may not always be clear from the field names what the code was designed for. This helps with troubleshooting and any edits that may be needed to the code in future.
//MOBILE MENU FONT SIZE//
.header-menu-nav-item a {
font-size: 25px;
}
