Jump to content

How to make menu navigation a drop down on mobile

Recommended Posts

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.png

2.png

Link to comment
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!! 

1.png

2.png

I've PM you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
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

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
  • 2 weeks later...
  • 3 weeks later...
  • 3 weeks later...
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

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
  • 1 month later...
  • 2 weeks later...
  • 5 months later...
  • 1 month later...

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: 

1584687162_ScreenShot2023-02-04at11_00_01am.thumb.png.f058ca3b850cdb24bbc7d74e07600519.png

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

1521690709_ScreenShot2023-02-04at11_13_59am.thumb.png.27ce701fe00d0d56ff3f1085437a5fea.png

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

Many thanks! 

 

Edited by Lauren_C
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.