Expand Dropdown Menu By Default on Mobile (Page View)

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!
 

Can you share link to this page? We can check easier

General Information — Khair Community Center (khaircenter.org)

We added a little note for mobile users to click the "+" icon in the meantime.

That worked, thank you!

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

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

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

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