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

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. 

or

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!

-Patrick

Password: Party

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

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