Jump to content

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

Recommended Posts

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! 

Link to comment

Have you read this?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 6 months later...
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?

image.png.ec426f24a0d6c0676675404ea11a33db.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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.