cindyclaudia13 Posted November 3, 2020 Share Posted November 3, 2020 (edited) Site URL: https://cindyclaudia.com Hi, can I ask the custom CSS to change the 'menu' to hamburger for mobile and tablet view? I'm using the Wexley template My site is cindyclaudia.com (password: 123456) *If possible, I'd like the 3 lines hamburger menu. But if not, the regular 2 lines is fine too. And next, I'd like to know how to make the menu content full screen when selected (on mobile and tablet) like the examples I attached. Thank you! Edited November 5, 2020 by cindyclaudia13 Link to comment
Beyondspace Posted November 3, 2020 Share Posted November 3, 2020 #mobileNav.menu-open { height: 100vh !important; } #mobileNav .wrapper { position: relative; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .site-title #mobileMenuLink a { color: transparent; width: 100%; height: 15px; user-select: none } #mobileMenuLink { position: fixed; text-align: right; right: 20px; top: 60px; background-color: transparent; z-index: 9999; } #mobileMenuLink:before, #mobileMenuLink:after { content: ''; position:absolute; width: 40px; height: 1px; background:#000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition:0.5s; left: 0; } #mobileNav.menu-open + #mobileMenuLink { background:rgba(0,0,0,0); box-shadow: 0 2px 5px rgba(0, 0, 0, 0); } #mobileNav.menu-open + #mobileMenuLink:before { top: 0; transform:rotate(45deg); } #mobileNav.menu-open + #mobileMenuLink:after { top: 0; transform:rotate(135deg); box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); } Copy this to Settings->Design->Custom Css tuanphan 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
cindyclaudia13 Posted November 3, 2020 Author Share Posted November 3, 2020 Thank you so much! It works, but is there a way to make the menu a full page without scroll down (image attached)? Secondly, can I ask how to reduce the space between the header – post and font size of the title on mobile/tablet only (image attached)? Because the space looks right for the desktop ver. Thank you! Beyondspace 1 Link to comment
rd23 Posted December 24, 2022 Share Posted December 24, 2022 Hello, I used the above CSS code, however it is giving me the two line hamburger style. Is there a way I can get the three line hamburger style? Thank you. Link to comment
tuanphan Posted December 29, 2022 Share Posted December 29, 2022 On 12/25/2022 at 2:07 AM, rd23 said: Hello, I used the above CSS code, however it is giving me the two line hamburger style. Is there a way I can get the three line hamburger style? Thank you. Use this CSS div#mobileMenuLink a:before { content: "\e030"; font-family: 'squarespace-ui-font'; font-size: 30px; } div#mobileMenuLink a { font-size: 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