Jump to content

Call to Action on mobile navigation bar

Go to solution Solved by tuanphan,

Recommended Posts

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/

Edited by KB2020
Added site link
Link to comment
  • Replies 13
  • Views 808
  • Created
  • Last Reply

Top Posters In This Topic

6 hours ago, tuanphan said:

No button here

image.thumb.png.ce36deef8005459ddae01ff628a64866.png

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 
image.thumb.png.5df8bcb8fb20cd8fbee10eec52ef1110.png

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.

Link to comment

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 🙂

Link to comment

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

image.png.44ca8f4038087718d6ef39b3e9a8d14c.png

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
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?

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
  • Solution
On 7/23/2023 at 9:24 AM, tuanphan said:

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

image.png.44ca8f4038087718d6ef39b3e9a8d14c.png

Change to this code

@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;
}
a.btn {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
}

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.