Make Your Divi Ajax Filter Sticky on Mobile Devices

Easy

CSS

Machine, BodyCommerce, Ajax Filter

Details

This Divi code snippet enhances the user experience on mobile devices by making the Divi Ajax Filter sticky at the top of the screen, ensuring it remains accessible as users scroll through product or archive lists. Ideal for sites using Divi Machine, Divi Ajax Filter, or Divi BodyCommerce, this CSS tweak requires adding a class (sticky-mobile-filter-container-row) to the row containing the filter.

Implementing this Divi code snippet can significantly improve navigation and usability on e-commerce sites, making it easier for customers to apply filters without needing to scroll back to the top.

Snippets Demo

Code

1

Description:
Add the class sticky-mobile-filter-container-row in the row containing the filter.

Language: CSS

Where to add: Divi Theme Options

                        /* This CSS snippet is designed for Divi Engine plugins like Divi Machine, Divi Ajax Filter, and Divi BodyCommerce. 
   It enables a sticky filter feature on mobile devices for a row with the class name 'sticky-mobile-filter-container-row'. 
   Specifically, it makes the first column of a two-column row (typically containing the filter module) sticky at the top of the viewport on mobile screens. */

@media (max-width: 980px) { /* Targets screens with a maximum width of 980px, typically tablets and mobile devices. */
    .sticky-mobile-filter-container-row > .et_pb_column:first-child {
        position: -webkit-sticky; /* Ensures compatibility with Safari mobile browsers. */
        position: sticky; /* The sticky positioning keeps the element at the top of the viewport as the user scrolls. */
        top: 0; /* This value can be adjusted to change the offset from the top of the viewport. */
        max-height: calc(100vh - 0px); /* change 0px to whatever value you have put in for "top:. Ensures content in the column is not out of the viewport */
        overflow-y: auto;
    }
}

Related Snippets

Intermediate | CSS

Prevent CLS by Restricting BodyCommerce Gallery Height

Mar 25 2025

BodyCommerce

Easy | CSS

Limit Height of Post/Product Images in Loop Templates (no crop)

Feb 07 2025

Machine BodyCommerce Ajax Filter

Easy | CSS

Scrollable Checkbox/Radio Fields

Dec 23 2024

Machine BodyCommerce Ajax Filter

Easy | CSS

Place the Filter Reset Button inline with the Filter Fields

Nov 14 2024

Machine BodyCommerce Ajax Filter

Easy | CSS

How to Align the Search Button in Divi Engine Filter: A Simple CSS Snippet

Aug 27 2024

Machine BodyCommerce Ajax Filter

Easy | CSSJavascript

Implementing a Lightbox for ACF Images in Your WordPress Site

Jul 10 2024

Machine

Intermediate | PHP

Customize WooCommerce Variation Text

May 22 2024

Easy | CSS

Limit the Divi BodyCommerce PP Gallery Module Height

Apr 09 2024

BodyCommerce

Easy | CSS

Change the Google Map Cluster Icon in Divi Machine Multi-Pin Maps

Mar 19 2024

Machine

Easy | CSS

Numerical Indexing for Repeated Fields in the Divi Machine Repeater Module

Feb 29 2024

Machine

Explore more from Divi Engine

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Find out more

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Find out more

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Find out more

Divi Handoff

Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.

Find out more

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Find out more

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Find out more

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active