Jump to content

Trying To Make Mobile Nav Parent Folder Dropdown Expanded As Default

Recommended Posts

Site URL: http://www.thesupremecollective.co.uk

Hi everyone! I'm so hoping someone will be able to help me. I've scoured these forums and also the the web and feel like I'm getting closer but still no joy as of yet!

 

I wanted a minimalist look for my navigation menu, so I've put all my nav links in a folder - this works great on desktop. However when on mobile, I don't like that you click the burger icon and then you have to go and click 'Menu' (which is what I've named my parent folder) to get the list of links. I'd rather those links just be there straight away. I believe the key is in setting aria-expanded to true. I'm a beginner coder (at best! ha!) Any help would be much appreciated. 

 

I've put this in Design> Custom CSS:

// Trying to make the mobile menu automatically show as dropped down - doesn't work! //
#mobileNav .folder-parent a {
    aria-haspopup: "false" !important;
    aria-expanded: "true" !important;
}

 

I'm on squarespace 7.0 Marquee. Website is www.thesupremecollective.co.uk

 

Thank you everyone in advance. x

Link to comment
4 hours ago, rhonad said:

Site URL: http://www.thesupremecollective.co.uk

Hi everyone! I'm so hoping someone will be able to help me. I've scoured these forums and also the the web and feel like I'm getting closer but still no joy as of yet!

 

I wanted a minimalist look for my navigation menu, so I've put all my nav links in a folder - this works great on desktop. However when on mobile, I don't like that you click the burger icon and then you have to go and click 'Menu' (which is what I've named my parent folder) to get the list of links. I'd rather those links just be there straight away. I believe the key is in setting aria-expanded to true. I'm a beginner coder (at best! ha!) Any help would be much appreciated. 

 

I've put this in Design> Custom CSS:

// Trying to make the mobile menu automatically show as dropped down - doesn't work! //
#mobileNav .folder-parent a {
    aria-haspopup: "false" !important;
    aria-expanded: "true" !important;
}

 

I'm on squarespace 7.0 Marquee. Website is www.thesupremecollective.co.uk

 

Thank you everyone in advance. x

Correct approach is

@media only screen and (max-width: 768px) {
  #mobileNav ul li.folder ul {
      display: block;
  }  
  #mobileNav ul li .folder-parent>a:first-child:before {
    content: '' !important;
}
}

image.png.53484a8f1deb4048bb4e74abd739c283.png

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

Thank you so much @bangank36 - you don't know how long I've been trying to fix this. I really appreciate your help so much. I added your code - it works perfectly! Thank you again!!

The menu parent folder name is slightly misaligned. I've tried centering with 'text-align' property but it didn't work. Any ideas?

IMG_1517.PNG

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.