Trying To Make Mobile Nav Parent Folder Dropdown Expanded As Default

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

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;
}
}

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?

@rhonad to align text "menu", add this CSS

#mobileNav .folder-parent a span {
    display: block;
}