Creating a fullscreen menu

Hi there,

I'm turning to the faithful squarespace community having spent fruitless hours trying to solve a problem for my website... I'm hoping someone may know the answer.

I am looking to create a full screen menu (reference: https://majorplayers.co.uk/), with the following (or similar) functionality:

• Menu button in nav (with a secondary 'call to action' button located also in the nav)
• When you click the menu button it opens, and when you click it again it closes

I would be so apprecaitive of any advice on how I can achieve this. 

My (work in progress) site is:

https://rectangle-wisteria-55e2.squarespace.com

PW: AstonHolmes23

Thank you very much in advance. 

Matt 

You the man Tuanphan! Thank you so much 🙏

On 1/26/2023 at 7:33 PM, tuanphan said:

body:not(.header--menu-open) .header-menu {
    left: -200%;
    transition: all 0.3s;
}
.header--menu-open .header-menu {
    left: 0;
    transition: all 0.3s;
}

Is there a way to make this pop out from the right and not the left? I've changed the left: values to right and it is now appearing on the right side but it still slide in from the left instead of sliding in from the right. Thanks!

On 12/4/2023 at 8:36 AM, Taysha said:

Is there a way to make this pop out from the right and not the left? I've changed the left: values to right and it is now appearing on the right side but it still slide in from the left instead of sliding in from the right. Thanks!

Changed both left to right. If it doesn't work, please share link to your site

body:not(.header--menu-open) .header-menu {
    right: -200%;
    transition: all 0.3s;
	left: unset !important;
}
.header--menu-open .header-menu {
    right: 0;
    transition: all 0.3s;
	left: 0 !important;
}