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

Question Footer fixed to the bottom of every page

S

stas3dart

New Member
Hi there, using Elementor Pro, with a custom footer. On some pages, that have less content, the footer isn't at the bottom. Tried sticky options and the rest and couldn't get it to work. Would be great if someone could suggest a workaround to this.
 
Tonio

Tonio

Member
It's probably because Elementor doesn't know what to do with the empty space between the content of th page and the bottom. Did you set anything to a fixed height? Maybe you used a fixed height for sections? It might help if you set the bottom section for the page to 'standard' instead of 'minimum height'. Otherwise, add a separator to the page to stretch the page height.
 
Community

Community

Administrator
Staff member

stick footer to bottom of the page

You could try doing something like this to stick footer to bottom of the page :

Give the section an ID or class. Then add this CSS in the global CSS.

Code:
.yourclass {
    width:100%;
    position:relative;
    top:100vh;
}
 
Last edited:
lutenist

lutenist

New Member

stick footer to bottom of the page

You could try doing something like this to stick footer to bottom of the page :

Give the section an ID or class. Then add this CSS in the global CSS.

Code:
.yourclass {
    width:100%;
    position:relative;
    top:100vh;
}

I did this in the Elementor Pro theme builder for the footer section. I set this in the Advanced > Custom CSS.
For me, it pushes my footer down so much that I have to scroll to see it.

Is there a way to have the footer at the bottom of the view height without it being sticky (where you always see it even though you scroll)?
 
SolutionX

SolutionX

New Member
.yourclass {
width:100%;
position:relative;
top:9vh;
}


The above is what i use you can try top:9vh; or top:10vh;
What have noticed is that different website themes footers and builds work different its bets you manually set the top till you get the right settings for your site, above is what i use and it works well for me.
 
P

Peter L

New Member
Edit the main section on the page > Layout tab > Layout section > change height to "Fit To Screen".
 

Attachments

  • fit to screen instruction.jpg
    fit to screen instruction.jpg
    32 KB · Views: 2,299
PluginsForWP

PluginsForWP

New Member
Please share a link to your website, we will help you.
 
T

th0msky

New Member
I think I have kind of a similar problem;

you see. I want a footer to stick on the bottom of my page. But I got certain pages which are filled with content where you don't have to scroll down on the page and I don't want you to do so.

Now if I add the footer, the page becomes longer by that amount of VH or %. Kind of obvious because I think elementor wants you to be able to scroll that certain part down to be able to see all the content on your page. But I don't need it to scroll down.

Is there a way to have a fixed position of the footer without the page being able to scroll down?

(i've tried it with the page having a VH of 93% since my footer is 7% but I kind of find this a weird work around since I also want my footer to be transparent so i want to use the full height of the page.)
 
M

Mululu

New Member
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.
 
R

Raz123

New Member
Setting my main/body to fit to screen pushed the footer fixed to the bottom, you can always try and see if it works for you
 

Latest posts

Latest Resources

Other Elementor Resources

elementor official
Top