Matthewese Posted September 10, 2023 Share Posted September 10, 2023 Hi all, as you can see, my button is too close to the hamburger menu. In smaller screen, they will overlap. How do I shift the botton << Link to comment
Ziggy Posted September 10, 2023 Share Posted September 10, 2023 Can you share your website URL? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Matthewese Posted September 11, 2023 Author Share Posted September 11, 2023 apologies. www.mefaceyoga.com Link to comment
Ziggy Posted September 11, 2023 Share Posted September 11, 2023 Thanks, when I take a look the button does not appear, have you removed it? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
CameronCogs Posted September 13, 2023 Share Posted September 13, 2023 I have this exact same problem...any fix to it? Link to comment
Ziggy Posted September 13, 2023 Share Posted September 13, 2023 @CameronCogs I can't see the issue so I can't fix it, can you share your website URL? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
CameronCogs Posted September 13, 2023 Share Posted September 13, 2023 Thanks for the reply Ziggy www.myvitaminscore.com password: 1234 Link to comment
Matthewese Posted September 16, 2023 Author Share Posted September 16, 2023 (edited) @Ziggy yes i removed it. Should I place back so you can look into it? Or could you help me with a code to have the button beside my hamburger menu? Edited September 16, 2023 by Matthewese Link to comment
Lesum Posted September 16, 2023 Share Posted September 16, 2023 (edited) @Matthewese You can add this code snippet within the Custom CSS panel. If you've already added any code previously, insert this code after the existing code. @media only screen and (max-width: 1024px) { .header-title-nav-wrapper { flex: 30% !important; } .header-layout-nav-center .header-actions { width: 50% !important; display: flex !important; justify-content: flex-end !important; } .header .header-actions-action--cta { width: auto !important; } } Edited September 16, 2023 by Lesum If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
Lesum Posted September 16, 2023 Share Posted September 16, 2023 @CameronCogs You can add this code snippet within the Custom CSS panel. @media only screen and (max-width: 1024px) { .header .header-actions { display: block; } .header-title-nav-wrapper { flex: 30% !important; } .header-layout-nav-center .header-actions { width: 50% !important; display: flex !important; justify-content: flex-end !important; } .header-actions--right .header-actions-action { margin: 0 2.5vw 0 0vw !important; } } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
CameronCogs Posted September 17, 2023 Share Posted September 17, 2023 On 9/16/2023 at 12:32 AM, Lesum said: @CameronCogs You can add this code snippet within the Custom CSS panel. @media only screen and (max-width: 1024px) { .header .header-actions { display: block; } .header-title-nav-wrapper { flex: 30% !important; } .header-layout-nav-center .header-actions { width: 50% !important; display: flex !important; justify-content: flex-end !important; } .header-actions--right .header-actions-action { margin: 0 2.5vw 0 0vw !important; } } Thank you so much for the detailed reply. Unfortunately, adding this code actually made it worse. I have left your code in for now so you are able to look again, but not sure what is happening here. The button is overlapped even more now. Link to comment
Lesum Posted September 17, 2023 Share Posted September 17, 2023 @CameronCogs Can you also please add this code snippet: @media screen and (max-width: 1024px) { .header .header-actions-action--cta { width: auto !important; } } CameronCogs and Taylor_Design 2 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
CameronCogs Posted September 17, 2023 Share Posted September 17, 2023 15 minutes ago, Lesum said: @CameronCogs Can you also please add this code snippet: @media screen and (max-width: 1024px) { .header .header-actions-action--cta { width: auto !important; } } IT WORKED! Thank you so much, truly appreciated Lesum. Thats awesome, who knew it needed all this coding just for a button lol. Lesum 1 Link to comment
Matthewese Posted September 18, 2023 Author Share Posted September 18, 2023 @Ziggy on iphone it still looks too close. Is there a way to shift it further < Link to comment
Matthewese Posted September 19, 2023 Author Share Posted September 19, 2023 @Ziggybumping this. Link to comment
Solution Ziggy Posted September 19, 2023 Solution Share Posted September 19, 2023 On 9/18/2023 at 7:28 AM, Matthewese said: @Ziggy on iphone it still looks too close. Is there a way to shift it further < Try this: @media only screen and (max-width:767px) { .header-actions--right .header-actions-action { margin: 0 2.5vw 0 0; } } Matthewese 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Matthewese Posted September 19, 2023 Author Share Posted September 19, 2023 @Ziggythanks alot!! Ziggy 1 Link to comment
Ziggy Posted September 19, 2023 Share Posted September 19, 2023 2 minutes ago, Matthewese said: @Ziggy thanks a lot!! Happy to help! Can you mark the answer as the solution to this thread and give it a like? Thanks! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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