Jump to content

Expand Dropdown Menu By Default on Mobile (Page View)

Go to solution Solved by tuanphan,

Recommended Posts

Hello,

I've added a few pages under a dropdown menu. When I access one of the pages on desktop view, I can see the menu of pages shown by default and can click on either page. On mobile, it's collapsed by default and shows a "+" icon instead.

Is there a way to have it be expanded by default instead of clicking on the "+" icon? Thanks!
 

Screenshot 2024-02-16 182859.png

Link to comment
  • 2 weeks later...
On 3/13/2024 at 2:05 AM, spinsterdesign said:

@tuanphan - Hmm, this is not working for me (7.1): https://sdibeta.squarespace.com/gallery (password: anyone) .

With 7.1, use this CSS code

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

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

@tuanphan - this code for 7.1 works! Thanks so much. I'll need to see if I can tweak the CSS to make the mobile menu not full-screen/full height (which may be controlled by js), as this splash screen menu is not that functional to encourage scrolling down to content on each page. But I really appreciate this. Thank you.

Link to comment
On 3/20/2024 at 1:14 AM, spinsterdesign said:

@tuanphan - this code for 7.1 works! Thanks so much. I'll need to see if I can tweak the CSS to make the mobile menu not full-screen/full height (which may be controlled by js), as this splash screen menu is not that functional to encourage scrolling down to content on each page. But I really appreciate this. Thank you.

To adjust size, use this new code

body:not(.header--menu-open) .header-menu {
    opacity: 1 !important;
    visibility: visible !important;
    bottom: unset !important;
    height: 50vh;
}
body.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

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.