Skip to main content

I don’t want a bar. I want a sticky CTA “button” that maintains a fixed position on the screen as they scroll, but only on mobile devices! What I’ve done so far is use custom HTML with an anchor text and style it like a button using custom CSS. I tried to set a media query to target screens and max-width 600 and I’m targeting the custom HTML element by its ID.

 

Right now my custom styling is applied, but no matter what I try with a media query and position: sticky, it behaves like any other element and doesn’t stick. Is there a way to do this that I haven’t thought of?

Hey @dellis! If I understand correctly, this is possible to create using the Fixed Header/Footer workaround from the Community! All you’ll need to do in order to ensure this is on mobile only is to complete the following steps.

  • Follow the steps as laid out in the workaround post, designing the CTA button and additional elements to your liking.
  • Select the box you used to build the Sticky Header/Footer workaround and use the Opacity Slider to make fully transparent by moving it to 0%. This will give the appearance that the button is floating.
  • Finally, in the desktop editor, click on the box (or section if you created a new one to embed the box within) and select the corresponding “eye” icon in the contents tab on the left hand side. This will allow you to hide the content on desktop while keeping it on mobile.

I always recommend to my customer that they use fixed footers for CTAs vs fixed headers when in the mobile view as it is easier for the user to access the button at the bottom of their screen rather than having to reach for the top.

 

Let me know if this helps or if you have any additional q’s!

Thanks @phildilello. I will play around with this option. I didn’t think the footer option would work based on the designs from our design team and how they want to implement it, but I’ll play with it and see what happens. 

 

The other option I’ve been exploring is targeting the ID of the custom HTML I am using, but I need to figure out what the parent element is because it’s overriding my stick positioning in CSS with absolute. If I can target that parent element then it’ll work. I did talk with one of our developers who was able to get it to work in Chrome dev tools, so I do know it can be done.

@phildilello I wanted to let you know that this worked perfectly. Thank you!

Reply


Terms & ConditionsCookie settings