Creating a fullscreen menu

MattDerrickAH · January 19

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

tuanphan · January 26

Add to Design > Custom CSS

/* Burger -logo - cart */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
/* customize menu */
nav.header-menu-nav-list {
    width: 50%;
}
.header-menu-bg.theme-bg--primary {
    width: 50%;
}
.header-menu-nav-folder[data-folder="root"] {
    overflow: hidden;
}
body:not(.header--menu-open) .header-menu {
    left: -200%;
    transition: all 0.3s;
}
.header--menu-open .header-menu {
    left: 0;
    transition: all 0.3s;
}
}

MattDerrickAH · January 27

You the man Tuanphan! Thank you so much 🙏

Creating a fullscreen menu

Recommended Posts

MattDerrickAH

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

Link to comment

MattDerrickAH

Link to comment

Create an account or sign in to comment

News

tuanphan

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources