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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment