Mobile Menu Dropdown Subcategories

Site URL: https://www.shopartbar.com

Hello, 

I am trying to change the mobile nav to show drop-downs with subcategories vs. going to another page to show the subcategories. How can I change/add to the code to allow for this type of movement?  Any help is appreciated! (Password: haley) Mock-up attached: now (left) how I would like it to look (right). 

Thank you!

What you are asking for is a 3 level navigation but Squarespace yet supports only 2 levels.

I wrote an article in the past about this on my blog, the solution involves javacript code that needs to be copy pasted into the Injections > Footer section in Squarespace and CSS that needs to be placed into the Custom CSS panel.

This is the article: https://www.ui-workarounds.com/make-a-3-level-navigation-in-squarespace/

Thank you! I did try to utilize your code, but it did not work. Perhaps I could code in a fly away type menu and hide the main mobile nav? 

Probably your layout or theme has different classes than the one I worked on and that's why it did not work.

Sure a menu alternative to main navigation on mobile is also good.  The linking is the problem when you click on a second level link and it should open an associated menu. That is what the javascript snippet in the article took care of.

On 9/28/2022 at 5:41 PM, joseph81 said:

Probably your layout or theme has different classes than the one I worked on and that's why it did not work.

Sure a menu alternative to main navigation on mobile is also good.  The linking is the problem when you click on a second level link and it should open an associated menu. That is what the javascript snippet in the article took care of.

I built out my own and it came out delightful. Check it out: www.shopartbar.com. 

@artbar

I'm trying to get the mobile nav to be a dropdown instead of the annoying second page. I've looked everywhere and twice your comments came up. It looks like you figured it out without a plugin. HOW??

I'm desperate to solve this and there are no answers anywhere. I tried visiting your site but it is expired. 

I'm hoping this is just some CSS I can throw in. 

@WillMyers has a post about mega menus that will be helpful here: https://www.will-myers.com/articles/building-a-mega-menu-in-squarespace-71-free

If you don't know how to code or just want easy I can recommend the pro version of his menu. I have it on my author site and love it. This link will jump you right to that part of the article https://www.will-myers.com/articles/building-a-mega-menu-in-squarespace-71-free#Mega Menu Pro