Jump to content

Mobile Navigation Menu - Removing Folders and Keeping only Page Header Links

Recommended Posts

Site URL: https://pte.squarespace.com/

Password: Party

Hi! I am wondering if there is a way to remove the folder content for mobile and just leave the main titles in place. For example:

ABOUT (remove Arrow and take me straight to the About page)

I believe there are two ways to go about this:

1. Add custom code to switch the navigation links from taking you to the folder contents and straight to the page. As well as getting rid of the arrow. 


2. In the custom CSS, I initially removed the redundant menu options. For example:

ABOUT > ABOUT, Team, Process, Pricing

I turned off the display of .header-nav-folder-item: first-child. However, instead of hiding it, we can switch the .header-nav-folder-item: first-child with the first ABOUT option that takes you to the folder contents. 


The overall goal would be to bypass the nav folders and go straight to the pages for mobile devices only. Your help is greatly appreciated!


Password: Party






Link to comment

Add to Last Line in Settings > Advanced > Code Injection > Footer

  header#header span.chevron.chevron--right {
    display: none;
$(document).ready(function() { 
	$('.header-menu-nav-folder[data-folder="root"]>div>div:first-child').click(function() {
		window.location = "/about";


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.