Small Mobile Burger Menu Help

Hello!

I'm back - looking to start over on my hamburger menu building - this time starting with mobile menu and working over to PC so as not to brick this function on all devices (what has happened currently).

How would I build a burger menu like this for my website on mobile?: LSGJ.org 
I'm totally okay with rebuilding the burger menu on both PC and mobile browser from what it currently is, because I'm in charge of this website launching and I've only a few days until official launch.

Any help appreciated - thank you in advance!

Update: I have settled with a plugin from Ghost Plugins which at least functions really well on all devices. I still wish I could make a menu that looked like this, but I could not find out how.

If anyone has any suggestions, happy to hear them out still.

P.S. Is there any way to CSS code a custom color for the burger menu outside of the site style attached to the header?

Hi,

You mean build this menu in screenshot?

• Show a burger
• Click burger > show red overlay menu, change burger to X icon

?

17 minutes ago, tuanphan said:

Hi,

You mean build this menu in screenshot?

• Show a burger
• Click burger > show red overlay menu, change burger to X icon

?

Hi @tuanphan, correct. It seems to me maybe this a squarespace limitation to build this kind of menu as an element piece on the web page versus something that takes up most of the screen and prevents further scrolling as the default menu.

Don't remove any code in your current code. Add this to Design > Custom CSS

@media screen and (max-width:767px) {
.header-menu {
    left: 20px;
    right: 20px;
    max-height: 60%;
}
}