sikoyadesign Posted May 7 Share Posted May 7 Hello! I am looking for a solution to create a quarter-sized hamburger menu for desktop ONLY*, similar to this website. I would also love to add the contact details under like they have too. Any suggestions/codes would be amazing! I haven't been able to find any! *I have tried a code for a hamburger menu, but it applies these changes to the mobile menu which I don't want – I'm happy for the mobile menu to stay full screen. .header .header-burger{ display:flex } .header-nav, .header-actions { display:none } .header--menu-open .header-menu { opacity: 1; visibility: visible; } .header .header-burger{ display:flex } .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-left: 50%; box-shadow: none } .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header-menu-nav-item a { padding-top: 1vw; padding-bottom: 1vw; } .header-menu-nav-folder[data-folder="root"] { overflow: hidden; } /* Desktop menu spacing */ @media screen and (min-width:992px) { .container.header-menu-nav-item a { margin-top: 3px; margin-bottom: 5px; } } div.header-menu-nav-item a { font-size: 20px !important; padding: 10px; } Link to comment
Beyondspace Posted May 7 Share Posted May 7 (edited) 10 hours ago, sikoyadesign said: Hello! I am looking for a solution to create a quarter-sized hamburger menu for desktop ONLY*, similar to this website. I would also love to add the contact details under like they have too. Any suggestions/codes would be amazing! I haven't been able to find any! *I have tried a code for a hamburger menu, but it applies these changes to the mobile menu which I don't want – I'm happy for the mobile menu to stay full screen. .header .header-burger{ display:flex } .header-nav, .header-actions { display:none } .header--menu-open .header-menu { opacity: 1; visibility: visible; } .header .header-burger{ display:flex } .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; width: 50%; margin-left: 50%; box-shadow: none } .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header-menu-nav-item a { padding-top: 1vw; padding-bottom: 1vw; } .header-menu-nav-folder[data-folder="root"] { overflow: hidden; } /* Desktop menu spacing */ @media screen and (min-width:992px) { .container.header-menu-nav-item a { margin-top: 3px; margin-bottom: 5px; } } div.header-menu-nav-item a { font-size: 20px !important; padding: 10px; } Have you built your site on Squarespace yet? Share your URL so we can check it more easily Edited May 7 by Beyondspace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted May 7 Share Posted May 7 With squarespace, you can try the following custom CSS to achieve the 40% burger menu on desktop .header-display-desktop{ display: none; } .header-display-mobile { display:flex; } .header-display-mobile .header-burger { display: block; } .header-display-mobile .header-nav-wrapper { display: none; } .header--menu-open .header-menu { opacity: 1; visibility: visible; } body:not(.header--menu-open) .header .header-announcement-bar-wrapper [data-header-style="solid"].header-background-solid { background-color: unset; } .header--menu-open .header-menu{ width: 40%; left: auto; } Here is my testing This could be a good approach for you to have desired layout BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Solution sikoyadesign Posted June 1 Author Solution Share Posted June 1 Thank you so much guys! I have managed to figure this out by installing a plugin: https://schwartz-edmisten.com/plugins/p/hamburger-menu-on-desktop-in-71 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