How to display header button on mobile

Site URL: https://www.swiftsbf.com/

Hello! Hoping someone can help me with displaying the header button on mobile. The settings for the header layout show a button, however it does not actually display... having chatted with squarespace user support, they told me it hides when "it can't fit" (even at ipad size screen it is hidden 😞 ) and that otherwise it can only be accomplished with custom code. There's definitely room in the header, even on a very small mobile screen, so i'd like to do it!

Hi,

Add apply button to next to burger on mobile? Which plan do/will you use? Each plan will need a different code

@tuanphanI am using the personal plan at the moment, version 7.1

On 8/24/2021 at 5:14 AM, Yakob said:

@tuanphanI am using the personal plan at the moment, version 7.1

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.header-actions.header-actions--right {
    display: block !important;
}

.header-actions-action.header-actions-action--cta {
    display: block;
}

.header-title-nav-wrapper {
    flex: 1 0 calc(~"100% - 150px") !important;
}
}

hey @tuanphan I used this snippet and it worked. Thanks. But I can't get a space between the hamburger and button. Any thoughts on how to move the button on mobile only to center or a little farther away from the hamburger? 

Thank you! That did it.

I'm having a similar problem that maybe @tuanphan can help.

I've used some of your code to display my navi button, but I',m having problem fitting in the frame and appearing in the various breakpoints before desktop.

Can you help?

On 12/11/2022 at 11:16 PM, TecTonic said:

I'm having a similar problem that maybe @tuanphan can help.

I've used some of your code to display my navi button, but I',m having problem fitting in the frame and appearing in the various breakpoints before desktop.

Can you help?

Hi,

What is your site url? We can check easier

hello i am having the same issue and I have no idea how to fix it, I am not the best with the back end of my website. I would like a button that is in my header to show on both desktop and mobile. at the moment you can only see it on desktop

On 7/13/2023 at 8:27 AM, nixen said:

hello i am having the same issue and I have no idea how to fix it, I am not the best with the back end of my website. I would like a button that is in my header to show on both desktop and mobile. at the moment you can only see it on desktop

 

What is your site url? We can check easier

Hello I am having the same issue and am not too tech savvy, where do I add this code in the big CSS list please? Is this in website tools, custom CSS?

On 11/1/2023 at 12:30 PM, TEK47 said:

Hello I am having the same issue and am not too tech savvy, where do I add this code in the big CSS list please? Is this in website tools, custom CSS?

Custom CSS, bottom of your CSS box

Thank you tuanphan!

Is there a way we can make a phone icon button please? Is it possible to have 2 buttons in the header?

On 11/6/2023 at 7:54 AM, TEK47 said:

Is there a way we can make a phone icon button please? Is it possible to have 2 buttons in the header?

Yes. Possible. What is site url + Which button text + url? We can help easier

Hi, I am trying to add the button to my mobile site, but the CSS currently hasn't been able to do the trick.
Website link www.asbestbros.be 
This is the web version, I would like the same button to show on mobile.

On 11/12/2023 at 11:10 PM, JB89_ said:

Hi, I am trying to add the button to my mobile site, but the CSS currently hasn't been able to do the trick.
Website link www.asbestbros.be 
This is the web version, I would like the same button to show on mobile.

I see you figured it out but button overflow the screen. You can add this code to Website > Website Tools > Custom CSS to resize button on mobile

@media screen and (max-width:991px) {
a.btn {
    font-size: 10px !important;
    padding: 10px 10px !important;
    position: relative;
    left: -10px;
}
}