How to make menu navigation a drop down on mobile

Hello squarespace community,

I've always disliked the way that squarespace shows it's menu options in the mobile view, but I've never been able to get the code right to fix it. Instead of showing the nested view after clicking a folder, I would like for the available pages to smoothly display underneath that folder as a drop down menu with the appropriate arrow directions too. 

This means hiding the 'back' link which I think have the right code for: 

.header-menu-controls-control[data-action="back"] {
    display: none;
  }

I've attached a rough example of what I would like for the menu to do.

HUGE thanks if you can also help with the CSS for the arrows to display on folders in the desktop view too!! 

1 hour ago, mims said:

Hello squarespace community,

I've always disliked the way that squarespace shows it's menu options in the mobile view, but I've never been able to get the code right to fix it. Instead of showing the nested view after clicking a folder, I would like for the available pages to smoothly display underneath that folder as a drop down menu with the appropriate arrow directions too. 

This means hiding the 'back' link which I think have the right code for: 

.header-menu-controls-control[data-action="back"] {
    display: none;
  }

 

I've attached a rough example of what I would like for the menu to do.

HUGE thanks if you can also help with the CSS for the arrows to display on folders in the desktop view too!! 

I've PM you

Did you figure out how to fix this? I'm shocked that Squarespace changed the mobile menu display to not having dropdown/accordion menus. Even on their OWN website mobile menu, they use the dropdowns rather than displaying a whole new screen for submenu items. 

On 3/4/2022 at 11:34 PM, TinaLinkDesign said:

Did you figure out how to fix this? I'm shocked that Squarespace changed the mobile menu display to not having dropdown/accordion menus. Even on their OWN website mobile menu, they use the dropdowns rather than displaying a whole new screen for submenu items. 

What is your site url? We can help easier

On 1/28/2022 at 1:10 AM, bangank36 said:

I've PM you

Hello @bangank36, could You, please, PM me too this solution for mobile dropdown? 🙂

Thanks & regards,

Gerda

I'd love to know how to do this as well.

I saw a plugin with this feature.

If you share link to your site, we can check easier

Hi, is anyone able to help me with this? I also would like to have this done for the desktop view. A pm would help work with me

On 4/28/2022 at 4:52 AM, METFinePrinters said:

Hi, is anyone able to help me with this? I also would like to have this done for the desktop view. A pm would help work with me

 

What is your site url? We can check easier

I would like to be able to do the same, the site is 

https://capybera-beige-b8fr.squarespace.com/

p/w: NCSdataman

Many thanks in advance 🙂

On 6/20/2022 at 12:39 PM, sandracheesman said:

I would like to be able to do the same, the site is 

https://capybera-beige-b8fr.squarespace.com/

p/w: NCSdataman

Many thanks in advance 🙂

 

Here's a plugin from @ChrisSE :

https://schwartz-edmisten.com/shop/modern-mobile-menu-dropdown-for-squarespace

I would like to achieve this too, but without the plugin. Can someone help?

Hello, 

https://lifecycles-lca.squarespace.com/

PW: lifecycles123

I have forced the mobile menu on desktop and would like dropdown folders as in the first image: 

I have reached out to Chris Schwartz-Edmisten to see if the plugin is compatible. But any help in the meantime would be appreciated. 

I'm struggling to align the + icon at the right of the nav - can anyone help with that? 

Many thanks! 

On 2/4/2023 at 7:16 AM, Lauren_C said:

Hello, 

https://lifecycles-lca.squarespace.com/

PW: lifecycles123

I have forced the mobile menu on desktop and would like dropdown folders as in the first image: 

I have reached out to Chris Schwartz-Edmisten to see if the plugin is compatible. But any help in the meantime would be appreciated. 

I'm struggling to align the + icon at the right of the nav - can anyone help with that? 

Many thanks! 

 

Have you found the solution yet?

Hi Tuanpahn, Yes I have figured it out - thanks for checking! 🙂 

On 2/11/2023 at 10:21 PM, Lauren_C said:

Hi Tuanpahn, Yes I have figured it out - thanks for checking! 🙂 

@Lauren_C

I'm desperate to get my mobile nav to be a dropdown with the arrows aligned on the right. I've searched everywhere and you are the only person who has solved this riddle. 

How did you get the mobile nav to be a dropdown? And once you cracked that DeVinci code...how did you get the 'expand' icons to align on the right?

https://schwartz-edmisten.com/shop/modern-mobile-menu-dropdown-for-squarespace

1 hour ago, arielestulin said:

https://schwartz-edmisten.com/shop/modern-mobile-menu-dropdown-for-squarespace

@arielestulin, Lauren_C didn't use the plug-in. I'm trying to write the code. The plug-in is more-or-less just code that someone else wrote to solve the problem...and you can pay for the code. Not my thing, I'd rather write it myself. 

Hello! I'm also looking for a solution for this. Has anyone achieved it?

My URL is jessardizzone.com

I'm not a coder and I've never touched the code on Squarespace but this is really bugging me.

Thank you! 

On 6/15/2023 at 5:51 PM, JessArdiz said:

Hello! I'm also looking for a solution for this. Has anyone achieved it?

My URL is jessardizzone.com

I'm not a coder and I've never touched the code on Squarespace but this is really bugging me.

Thank you! 

What should it look like on mobile? We can help easier

Hello. Im looking for a solution like @Lauren_C and it would be awesome.

@tuanphan I'd love the solution for this too without the plugin please. We need to stay on personal plan so cannot use the plugin since it requires business plan or higher.

website: https://cymbals-tan-fkf5.squarespace.com/
PW: halpme

On 8/15/2023 at 3:38 AM, nicki-patsios said:

@tuanphan I'd love the solution for this too without the plugin please. We need to stay on personal plan so cannot use the plugin since it requires business plan or higher.

website: https://cymbals-tan-fkf5.squarespace.com/
PW: halpme

With Personal Plan, The solution that I was able to do recently is replace mobile burger menu with a section in Footer.

Then you can add one more section in Footer, use Accordion Block to add Dropdown, then I will give code to remove background, border around accordion and replace Burger Menu with This Section.

@tuanphan Hmmmm so there is no way to keep the hamburger menu and just change to make it like this? 

On 8/16/2023 at 8:13 PM, nicki-patsios said:

@tuanphan Hmmmm so there is no way to keep the hamburger menu and just change to make it like this? 

You will need to use JavaScript code to achieve this. Personal Plan doesn't support JS code