anyarum Posted May 26, 2023 Share Posted May 26, 2023 Hello, I have a pretty basic two-page website with a "buy now" button that takes visitors from the home page to the second page. On mobile, this looks rather silly since Squarespace requires you to display the hamburger menu in the header & when users click on it they see a blank screen with the "buy now" button at the bottom. I'm trying to figure out how to make it so that the "buy now" button shows up directly in the mobile header! Any ideas around how to do this with custom code would be greatly appreciated! Screenshots attached to show what I mean. Thanks, Anna Link to comment
paul2009 Posted May 26, 2023 Share Posted May 26, 2023 You forgot to include a working link to the site so that we can take a look. About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional. Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance. Link to comment
anyarum Posted June 9, 2023 Author Share Posted June 9, 2023 apologies! skipwithjoy.com Link to comment
Solution tuanphan Posted June 11, 2023 Solution Share Posted June 11, 2023 On 6/10/2023 at 12:30 AM, anyarum said: apologies! skipwithjoy.com Add to Design > Custom CSS @media screen and (max-width:991px) { .header-display-desktop { display: flex !important; } .header-display-mobile { display: none; } .header-burger { display: none; } .header-nav { display: flex !important; } .header-nav { display: flex !important; flex: 70% !important; justify-content: flex-end; } .header-actions.header-actions--right, .header-actions.header-actions--right div { display: flex !important; position: relative; left: -30px; }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
anyarum Posted June 15, 2023 Author Share Posted June 15, 2023 That worked! Thank you so much!!!! I really appreciate it! 🙂 tuanphan 1 Link to comment
LibeNunez Posted November 20, 2023 Share Posted November 20, 2023 Hi! Is there a way to display the button and keep the hamburger menu? I don't mind if the button shows up again on the menu, but I'd want the header of the mobile view to have the 3 items (burger, logo, button). Thanks! Link to comment
tuanphan Posted November 23, 2023 Share Posted November 23, 2023 On 11/21/2023 at 3:33 AM, LibeNunez said: Hi! Is there a way to display the button and keep the hamburger menu? I don't mind if the button shows up again on the menu, but I'd want the header of the mobile view to have the 3 items (burger, logo, button). Thanks! If you share site url, we can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
dmic Posted January 12 Share Posted January 12 I need the answer to this too. Anybody out there...? Link to comment
tuanphan Posted January 14 Share Posted January 14 On 1/13/2024 at 1:42 AM, dmic said: I need the answer to this too. Anybody out there...? If you share your site url, we can help easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesaltylife Posted January 18 Share Posted January 18 (edited) I used the code above. but I want to see the 'book now' button on the home page in mobile, but still keep the burger. Social icons and navigation can stay in the burger. https://www.skands.ca/ Edited January 18 by thesaltylife Link to comment
tuanphan Posted January 20 Share Posted January 20 (edited) On 1/19/2024 at 1:01 AM, thesaltylife said: I used the code above. but I want to see the 'book now' button on the home page in mobile, but still keep the burger. Social icons and navigation can stay in the burger. https://www.skands.ca/ Use this code to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:991px) { .header-actions.header-actions--right, .header-actions-action.header-actions-action--cta { display: flex !important; } .header-title-nav-wrapper { flex: 1 0 30% !important; } a.btn { padding-left: 10px !important; padding-right: 10px !important; font-size: 14px !important; } div.header-burger { position: relative; right: -2vw; } } Edited January 22 by tuanphan update code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesaltylife Posted January 22 Share Posted January 22 (edited) Thank you. That worked better, but there isn't enough space between the button and the burger. Burger needs to shift slightly to the right and Button slightly to the left, so there is a small gap. Edited January 22 by thesaltylife Link to comment
tuanphan Posted January 22 Share Posted January 22 7 hours ago, thesaltylife said: Thank you. That worked better, but there isn't enough space between the button and the burger. Burger needs to shift slightly to the right and Button slightly to the left, so there is a small gap. Just updated the code. You can check again Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesaltylife Posted January 22 Share Posted January 22 thank you. i'm guessing that you edited the same code that you previously pasted above, so that is what i pasted it in, but i don't see a change. Link to comment
tuanphan Posted January 25 Share Posted January 25 On 1/23/2024 at 3:37 AM, thesaltylife said: thank you. i'm guessing that you edited the same code that you previously pasted above, so that is what i pasted it in, but i don't see a change. It is fine to me now or you can adjust number -2 in the code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (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