How can I keep navigation folder expanded by default in the mobile menu

Heyy!  I am wanting the one folder to stay expanded by default so each title shows without having to click on the folder to expand the mobile menu.

I have tried using the code:

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

But this isn't working unfortunately - has anyone achieved this and been successful?

Site URL: https://cuboid-fish-h5ma.squarespace.com/
Password: NewSiteLove

The folder is currently titled "+" just to test for now

Any help would be soooo appreciated! 

Have you read this?

@Ziggy Thanks Ziggy!  I have and tried this code as well - and it doesn't seem to be working on my end

@GPGDesigns - did you ever find a working solution for this? I've tried 2 different coding solutions posted in the forum, and neither seems to work on my 7.1 test site at https://sdibeta.squarespace.com/gallery (pwd: anyone).

On 3/13/2024 at 2:07 AM, spinsterdesign said:

@GPGDesigns - did you ever find a working solution for this? I've tried 2 different coding solutions posted in the forum, and neither seems to work on my 7.1 test site at https://sdibeta.squarespace.com/gallery (pwd: anyone).

You mean show Metalwork items appear in this red position?

Hi, @tuanphan. No, I don't mean expand that submenu for Metalworks. I mean keep the main navigation menu expanded as a default on mobile (rather than having people click on the + or hamburger lines to expand the menu).

What we've found as a workaround is to create a manual header--logo or title, with text section of links beneath that (which we make a saved section) that we add to pages and disable the header on those pages. The downside to this is that any later changes to the menu need to then manually be made on all pages.  So this isn't ideal.

not seen like thgis menu in mobile view can you pls send me sacreenshot?

On 3/15/2024 at 6:09 AM, spinsterdesign said:

Hi, @tuanphan. No, I don't mean expand that submenu for Metalworks. I mean keep the main navigation menu expanded as a default on mobile (rather than having people click on the + or hamburger lines to expand the menu).

What we've found as a workaround is to create a manual header--logo or title, with text section of links beneath that (which we make a saved section) that we add to pages and disable the header on those pages. The downside to this is that any later changes to the menu need to then manually be made on all pages.  So this isn't ideal.

Try this code to Website > Website Tools > Custom CSS

body.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important;
}
body:not(.header--menu-open) .header-menu {
    opacity: 0 !important;
    visibility: hidden !important;
}

@tuanphan - thanks so much for this. This is definitely working for me in 7.1. Well done.

@tuanphan thanks for always replying with a solution!!