Sticky Footer

  • Resolved kronos1

    (@kronos1)


    2 weeks ago

    Hello, I’ve been using the Header and Footer builder for Elementor for a while and I love it. I am now trying to figure out if there are any solutions for the header and footer to be sticky? I am using Elementor free version.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Ankush Thakare

    (@iankusht)

    Hi @kronos1,

    You can make Footer Sticky by using below custom CSS code. You will need to add the custom class to the footer that you have created and use the below CSS with that custom class.<sider-code-explain id="sider-code-explain" data-gpts-theme="light"></sider-code-explain>.custom-id {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    }

    Kindly add the CSS using custom plugin or theme.

    Kind regards,
    Ankush

    Thread Starter kronos1

    (@kronos1)

    Thanks for your reply. I’m using the Elementor free version, so I’m not sure how I can add a custom class to the footer. How can I do this?

    Plugin Support Ankush Thakare

    (@iankusht)

    Hey @kronos1,

    No problem at all! I’ve created a screen recording to guide you through making the footer sticky on your website. You can check it out here: https://bsf.d.pr/v/UJaUeU.

    In the video, I’ve used a custom ID to achieve this. You can follow the steps shown and use any custom ID that fits your needs.

    Here’s the exact CSS code I added to my test site:

    #sticky-header { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; }

    Hope this helps! For now, I am marking this thread as resolved. Let me know if you need any further assistance.

    Best regards,
    Ankush ??

    Thread Starter kronos1

    (@kronos1)

    It works! Thank you for the steps. This was very helpful.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.