Call to Action on mobile navigation bar

Hi. As the site is only one page, there is no reason for the hamburger menu to show up on mobile. I have hidden the menu using custom css, however in its place I want there to be a call to action button which goes to an anchor link, just like how there is on the desktop site.

I have looked on this forum and the fixes don't seem to work for me. I am using a business plan. Many thanks

https://cyan-viola-a276.squarespace.com/

What is site password?

Sorry, I put a password back on after I thought I wasn't going to get a response!
Site is public now.

On 7/15/2023 at 9:45 PM, KB2020 said:

Sorry, I put a password back on after I thought I wasn't going to get a response!
Site is public now.

Hi,

I don't see cta button on desktop header. Can you check it again?

The 'Contact Us' button in the top right

On 7/19/2023 at 9:23 PM, KB2020 said:

The 'Contact Us' button in the top right

No button here

6 hours ago, tuanphan said:

No button here

That's odd. It shows on all my devices and other people's who I have checked.
What resolution screen are you using? It may be showing the mobile site without the hamburger because as the site wasn't responsive so I added some css to make it show different sections depending on screen size.

This is what I and all the other devices see 

The navbar buttons don't disappear until the width is less than 805 pixels.

The site is live at https://www.ajptranseuropean.com/ and I haven't heard of any issues from people I've asked, just needing the button to show on mobile! Thanks for your continued assistance.

Just come across my mind that you may be on a 720p display, which would make sense as to why the button doesn't show. If you press ctrl -, then it will show up. I am basically looking to have that button show on mobile, tablets and other screens which are too small for a navbar full of headings 🙂

Add to Design > Custom CSS

@media screen and (max-width:1024px) {
.header-actions.header-actions--right, .header-actions.header-actions--right .header-actions-action {
    display: flex !important;
}

div.header-actions-action {
    position: relative;
    left: -100px !important;
}

a.btn.btn--border.theme-btn--primary-inverse.sqs-button-element--primary {
    display: block !important;
}
}

Thank you Tuanphan, you're amazing!

Is there a way to edit the button size or design or does it just copy from the the desktop format? If that's the case then it's fine how it is 🙂

20 hours ago, KB2020 said:

Thank you Tuanphan, you're amazing!

Is there a way to edit the button size or design or does it just copy from the the desktop format? If that's the case then it's fine how it is 🙂

Yes. We can adjust size for mobile only. You want to change padding around button text or?

yeah maybe just make the padding a bit less so that its more in line with the size of logo on the left, thanks again for your quick response

Amazing. Thanks so much for your help!