Sticky Forms in Broadcast

[Bisovsky]

I have a Broadcast theme. I have single column layout with sticky forms. But it doesn't work properly in this template. Instead of sticking at the top, it sticks halfway down the page and then peels off again. It's terribly irritating. I would like it to work like on this website; https://moonmagic.com/en-pl/products/moonstone-ring-cloudy-shield?variant=40262339887176
link to preview https://vg6gn85r5e9ycc86-83649626407.shopifypreview.com

[VipulBudhiraja]

To make the sticky form work correctly in the Broadcast theme and stay at the top, you may need to adjust the CSS or JavaScript handling the sticky behavior. Here’s how you can customize it:

1. Inspect the Element:

   • Go to your preview link and open Developer Tools (right-click and choose "Inspect").
   • Identify the form's class or ID that controls the sticky behavior, which might be something like .sticky-form.

2. Adjust CSS:

   • In your theme's Edit code section, locate theme.css or styles.css.
   • Add or adjust the CSS for the form. For example:
     css

     Copy code

     .sticky-form { position: -webkit-sticky; position: sticky; top: 0; /* Adjust top to your preference */ z-index: 10; /* Ensures it stays above other content */ }
   • Test adjusting the top value to ensure it aligns with your desired position.

3. JavaScript Tweaks (If Needed):

   • Sometimes, themes use JavaScript to manage the sticky effect. Check for any scripts in your theme or header file that manage sticky behavior, as they might need adjusting.

4. Mobile View:

   • Ensure your CSS works on both desktop and mobile. You may need media queries to refine the sticky effect based on screen size.

For a smoother user experience like on Moon Magic, consider loading forms dynamically or refining scrolling triggers to ensure a seamless look.

Enhance your pages with smart guidance from the Debales AI Chatbot on Shopify! Ready to assist users effortlessly—let’s chat!

If this answer helped, please kindly Like and mark it as the accepted solution!