By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Footer "sticky" at the bottom

M

Mululu

New Member
Hello, I need help with the footer.

The following scenario:

If a page contains little content so that no scrolling is required, the footer will not be at the bottom of the page.

screencapture-baam-bud-de-maibaumsetzen-2019-2021-04-14-19_13_13.png


Now I need a solution that the footer is completely down. In this case, however, this should not be considered a sticky, otherwise the footer will cover the content on pages with more content. Instead, it should behave like a normal footer that you only see when you scroll.

I have already searched the web several times but have not found a solution to this day.
 
elementor official
busfizz.nl

busfizz.nl

New Member
This can be resolved with some custom CSS:

Step 1:

Name de CSS-Class of the footer widget in the advance tab


step1.jpg


Step 2:

Add the following code to your custom CSS:

.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}


step2.jpg
 
elementor official
S

Stor

New Member
I have the same quistion too. I have just tried your suggested method @busfizz.nl It does not work.. It just sticks the footer to the buttom, but not below the content.

How to keep the footer at the buttom (below all other content) AND at the same time when there are not so much content on a page, stick the footer to the buttom of the view port ?
 
elementor official
M

Mululu

New Member
@busfizz.nl

Thanks for your answer.

However, you can find this answer everywhere on the net. This code makes the footer more sticky even if the content is larger than the viewing area. And so the footer covers the content.

@Stor

After trying a little, I found the optimal solution for myself.

Note: Elementor Pro (certainly works without Pro, only then the HTML tag has to be added manually)

My content (posts & pages) is created with templates from the Elementor Theme Builder.

I gave each template the HTML tag: main.

1.PNG


Then I added the following code:

Code:
main{
    min-height: calc(100vh - 545px);
}

The 545px correspond to the sum of my header and footer.

If you still need help contact me.
 
elementor official
busfizz.nl

busfizz.nl

New Member
I have the same quistion too. I have just tried your suggested method @busfizz.nl It does not work.. It just sticks the footer to the buttom, but not below the content.

How to keep the footer at the buttom (below all other content) AND at the same time when there are not so much content on a page, stick the footer to the buttom of the view port ?
You can solve this by setting the display conditions of the footer with suggested CSS code to the specific page and create a new footer with display conditions to the entire site.
 
elementor official
S

Stor

New Member
@busfizz.nl

Thanks for your answer.

However, you can find this answer everywhere on the net. This code makes the footer more sticky even if the content is larger than the viewing area. And so the footer covers the content.

@Stor

After trying a little, I found the optimal solution for myself.

Note: Elementor Pro (certainly works without Pro, only then the HTML tag has to be added manually)

My content (posts & pages) is created with templates from the Elementor Theme Builder.

I gave each template the HTML tag: main.

View attachment 2301

Then I added the following code:

Code:
main{
    min-height: calc(100vh - 545px);
}

The 545px correspond to the sum of my header and footer.

If you still need help contact me.
Thanks it works:)
 
elementor official

Latest posts

Latest Products

Other Elementor Resources

elementor official
elementor official
Top