Displaying Button Directly in Mobile Header

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

You forgot to include a working link to the site so that we can take a look.

apologies! skipwithjoy.com

That worked! Thank you so much!!!! I really appreciate it! 🙂

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!

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

I need the answer to this too. Anybody out there...?

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

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/

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;
}
}

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. 

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

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.

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