MattDerrickAH Posted January 19 Share Posted 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 Link to comment
Solution tuanphan Posted January 26 Solution Share Posted 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 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattDerrickAH Posted January 27 Author Share Posted January 27 You the man Tuanphan! Thank you so much 🙏 Link to comment
Taysha Posted Monday at 01:36 AM Share Posted Monday at 01:36 AM 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! Link to comment
tuanphan Posted Tuesday at 08:38 AM Share Posted Tuesday at 08:38 AM 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment