cindyclaudia13 0 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 post
0 bangank36 683 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 BaNgan from 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, Geolocation Automatic Currency Converter, Sortable Table from GSheetIf 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 post
0 cindyclaudia13 0 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! Link to post
Question
cindyclaudia13 0
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!
Link to post
Top Posters For This Question
2
1
Popular Days
Nov 3
3
Top Posters For This Question
cindyclaudia13 2 posts
bangank36 1 post
Popular Days
Nov 3 2020
3 posts
Popular Posts
bangank36
#mobileNav.menu-open { height: 100vh !important; } #mobileNav .wrapper { position: relative; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .site-title #
Posted Images
2 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment