nowicluk Posted November 1, 2020 Share Posted November 1, 2020 Site URL: https://www.thecreativelab.nz/ Hi there, I applied the following code to my website but the logo is not in the centre: @media screen and (max-width: 3000px) { /* Display burger icon at all widths and align right */ .header .header-burger { display: flex; order: 2 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } } Link to comment
Beyondspace Posted November 1, 2020 Share Posted November 1, 2020 (edited) Let's consider adding this line of code @media screen and (max-width: 3000px) { /* Display burger icon at all widths and align right */ .header .header-burger { display: flex; order: 2 !important; } /* Make burger menu visible at all widths */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } /* Center logo in mobile device */ .header-title { text-align: center !important; } /* Hide primary navigation menu */ .header .header-title-nav-wrapper .header-nav { display: none; } .header-title-nav-wrapper { flex: 1 0 100%; } } Edited November 1, 2020 by bangank36 nowicluk, purpose and tuanphan 3 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
nowicluk Posted November 1, 2020 Author Share Posted November 1, 2020 Thank you. All solved. tuanphan and Beyondspace 2 Link to comment
purpose Posted July 5, 2021 Share Posted July 5, 2021 Hi there, Site URL: https://www.unemodemeilleure.com Adding this code worked perfectly with centering my logo, but as a result the burger menu (top right) looks like its falling off the page. I really hope you can help! Thanks 🙂 This is the current code: /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: inline-block } .burger-inner .top-bun, .burger-inner .bottom-bun { height: 4px; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } .header-title-nav-wrapper { flex: 1 0 100%; } Beyondspace 1 Link to comment
Beyondspace Posted July 5, 2021 Share Posted July 5, 2021 32 minutes ago, purpose said: Hi there, Site URL: https://www.unemodemeilleure.com Adding this code worked perfectly with centering my logo, but as a result the burger menu (top right) looks like its falling off the page. I really hope you can help! Thanks 🙂 This is the current code: /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* Hide header button */ .header-actions { display: none; } /* show burger */ .header-burger { display: inline-block } .burger-inner .top-bun, .burger-inner .bottom-bun { height: 4px; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } .header-title-nav-wrapper { flex: 1 0 100%; } try .header-display-desktop .header-burger { position: absolute; right: -10px; } 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
purpose Posted July 5, 2021 Share Posted July 5, 2021 7 minutes ago, bangank36 said: try .header-display-desktop .header-burger { position: absolute; right: -10px; } this worked perfectly, thank you! 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