SQSP Themes

View Original

How Do I Get Rid of the Hamburger Menu in Squarespace?

To remove the hamburger menu in Squarespace, which usually appears in mobile view or on certain templates for compact navigation, follow these detailed and practical steps. Note that Squarespace versions 7.0 and 7.1 have subtle differences in their customization options. We'll cover both versions.

For Squarespace 7.1:

  1. Access Page Settings:
  2. Navigate to the Home menu.
  3. Click on the “Design” panel.

  4. Use the Site Styles Panel:

  5. In the “Design” menu, select “Site Styles.”
  6. Look for options that pertain to the header or navigation. These may be named differently depending on the template you are using but will typically be found under the "Header" section within "Site Styles."

  7. Customize Mobile Styles:

  8. Within the “Header” section, search for options related to mobile view or mobile styles.
  9. Sometimes, the “Mobile Menu Icon” setting allows you to modify or remove the hamburger icon.

  10. Custom CSS:

  11. If the built-in settings do not provide an option to remove the hamburger menu, you can use custom CSS to override it.
  12. Go back to the "Design" menu and select "Custom CSS."

Here’s a sample CSS snippet to hide the hamburger menu:

css .Header-menu-button { display: none; }

  • Paste the snippet into the Custom CSS window and save your changes.

For Squarespace 7.0:

  1. Access Template Settings:
  2. Navigate to the Home menu.
  3. Click on the “Design” panel.

  4. Go to Site Styles:

  5. Select “Site Styles” which will open style settings related to your template.

  6. Adjust Mobile Navigation Settings:

  7. Find the settings related to mobile navigation or mobile styles within this panel. Often this setting is template-specific.

  8. Custom CSS:

  9. Similar to version 7.1, if no direct setting is available, you can hide the hamburger menu through custom CSS.
  10. Navigate to the "Design" menu and select "Custom CSS."

Below is a sample CSS snippet for Squarespace 7.0:

css .Mobile-bar .Mobile-bar-branding, .Mobile-bar .Mobile-bar-nav { display: none; }

  • Paste this snippet into the Custom CSS editor and save the changes.

Additional Considerations:

  • User Experience: Removing the hamburger menu entirely may affect the user experience negatively, as it keeps your navigation hidden on mobile devices. Consider alternative solutions, such as using a full-width navigation bar that adapts to smaller screens.

  • Template-Specific Variables: The exact class or ID names in the CSS might vary depending on the Squarespace template you're using. You might need to inspect your site’s HTML using browser developer tools to identify the correct selectors.

  • Backup: Always backup your site or any custom CSS before making changes. This ensures you can easily revert if something goes wrong.

Final Steps:

After making these adjustments, preview your website on different devices to ensure that the changes have been applied correctly and that the site remains user-friendly. It's also a good practice to check different browsers to ensure consistency across platforms.