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 Wordpress and 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!

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.
 
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
 
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 ?
 
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.
 
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.
 
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:)
 
c062785

c062785

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.

When you say 'template' do you mean 'section'?

I have a footer template but I can't access the settings like that for the 'template' just for the 'sections' INSIDE of the template...
 
M

Mululu

New Member
When you say 'template' do you mean 'section'?

I have a footer template but I can't access the settings like that for the 'template' just for the 'sections' INSIDE of the template...
Note: Elementor Pro (certainly works without Pro, only then the HTML tag has to be added manually)
 

Latest Resources

Other Elementor Resources

elementor official
Top