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. 

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

 

Mobile_nav_window.thumb.png.ed88131fd13b7e6e9f2d394b393483b0.pngRedundantMenuOption.thumb.png.9be83b9cd9319a215144163d06f553bd.png

 

 

 

Link to comment

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>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Is there an adjustment to this code to have it apply to only one of the navigation options rather than all of them?

Example/ using the above context, I'm looking for code if I still wanted the drop-down options for Careers and Contact to open in the mobile navigation, but not the About options

Link to comment
4 hours ago, honeypeach said:

Is there an adjustment to this code to have it apply to only one of the navigation options rather than all of them?

Example/ using the above context, I'm looking for code if I still wanted the drop-down options for Careers and Contact to open in the mobile navigation, but not the About options

What is your site url? We can adjust code easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.