Jump to content

Folder (Dropdown) Navigation for Desktop -- How do I bypass the folder in mobile?

Recommended Posts

Site URL: http://www.peculiarcopy.com

So I want a clean look on my website and put my navigation pages into a folder for my desktop to make navigation a dropdown. But on mobile navigation is automatically turned into a dropdown. This then becomes annoying as you open the mobile navigation to find a single option (MENU) to click and thus open the navigation options. I want to have the folder for navigation on the desktop view but NOT on mobile. Is there code for this little workaround? 

Screen Shot 2021-11-23 at 2.22.26 PM.jpeg

Screen Shot 2021-11-23 at 2.22.47 PM.jpeg

Screen Shot 2021-11-23 at 2.23.00 PM.jpeg

Link to comment
42 minutes ago, CNI3111 said:

Site URL: http://www.peculiarcopy.com

So I want a clean look on my website and put my navigation pages into a folder for my desktop to make navigation a dropdown. But on mobile navigation is automatically turned into a dropdown. This then becomes annoying as you open the mobile navigation to find a single option (MENU) to click and thus open the navigation options. I want to have the folder for navigation on the desktop view but NOT on mobile. Is there code for this little workaround? 

Screen Shot 2021-11-23 at 2.22.26 PM.jpeg

Screen Shot 2021-11-23 at 2.22.47 PM.jpeg

Screen Shot 2021-11-23 at 2.23.00 PM.jpeg

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  .header-menu-nav-folder[data-folder="root"] {
    display: none !important;
  }
  .header-menu-nav-folder-content .header-menu-controls {
    display: none;
  }
  .header-menu-nav-folder:not([data-folder="root"]) {
    transform: unset;
    transition: unset;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

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
  • 2 weeks later...
On 12/6/2021 at 2:54 AM, HarKS said:

Hey, this worked great, but it got rid of my cta button in the mobile menu; so how do I retrieve it?

Thankfully it's visible on desktop

Can you share link to your site? We can check problem 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
On 12/6/2021 at 2:54 AM, HarKS said:

Hey, this worked great, but it got rid of my cta button in the mobile menu; so how do I retrieve it?

Thankfully it's visible on desktop

Let us know your site url for checking

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
  • 4 months later...
On 4/13/2022 at 8:02 AM, amiablege said:

this code work perfect but i had social media icons it was showing before now it is not showing

https://lizard-paddlefish-y53w.squarespace.com/

Show icons on left of logo or icons inside Mobile overlay menu?

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

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.