How To Make a Sticky Header on Free Elementor

Sticky for the same position in all devices.

1. Select the container

Select the container you want to make sticky.

2. Go to the Advance Tab

i) Click the “advanced” tab in the left elementor panel, and see below the position option.

ii) Select the “fixed” position from the given options.

iii) If you want to make the stick top position select the option as shown below:

Or if you want to make the header stick to the bottom position select the option below:

Sticky for the different positions in different devices:

i) Give the container a “sticky” class.

ii) Add an HTML code block

iii) Paste the below code.

<style>
    /* For desktop: make the container positioned at the top */
    .sticky {
        position: fixed; /* or absolute depending on the container’s context */
        top: 0;
        width: 100%;
        z-index: 1000; /* Adjust as needed */
    }

    /* For mobile: position the container at the bottom */
    @media (max-width: 768px) {
        .sticky {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            top:auto;
        }
    }
</style>