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 tuanphan, nowicluk and purpose 3 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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
nowicluk Posted November 1, 2020 Author Share Posted November 1, 2020 Thank you. All solved. Beyondspace and tuanphan 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; } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) 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
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
MortoVivo_Lu Posted September 25 Share Posted September 25 Tried this and worked great for desktop but now logo and menu are off to the right on mobile. Any help here? Thank you! Link to comment
tuanphan Posted September 25 Share Posted September 25 39 minutes ago, MortoVivo_Lu said: Tried this and worked great for desktop but now logo and menu are off to the right on mobile. Any help here? Thank you! What is site url? We can check problem easier 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