Hey kids, minor update, I used to use DIVI for my website, I now use a plain basic template called ‘Astra’ and on top of that, I use ‘Elementor’ plugin. That lets me WYSIWYG drag-n-drop build my website but it feels less bulky. I have options to turn off functions I’m not using, whereas DIVI made me feel like it was loading all sorts of functionality but it wasn’t being utilised at all. Also, all my code is normal and typical code, it’s not made up of all sorts of custom classes n such!
Anyway. I wanted a revealing footer, and it wasn’t as simple as just copy pasting code that I found on the internet, -kinda. I copypasted some code but then tweaked it because I had a few problems.
The id’s and classes didn’t match my new theme for starters and also all my elements are in theory all floating on top of each other with no background colour, so I needed to add one of those in.
Here is the code:
#content{
z-index:2;
position:relative;
margin-bottom:100px; /* set to the height of my footer */
background:white;
}
footer{
bottom:0;
width:100%;
position:fixed;
z-index:-1;
height:100px; /* Must be set to match the #content 's margine-bottom*/
}
Paste that into your ‘Additional CSS’ in Appearance > Customize.
That will make it site wide. If you want it to be on only certain pages then customize that individual page through the page builder.
If you’ve made a custom footer through one of the Elementor Templates then I found that ‘.elementor-location-footer’ was the right class to target instead of ‘footer’
Hope this helped someone!
Christian says:
Thanks a lot!
Perfectly works with Elementor 2.5 and Astra on one site for me. Replaced footer with .elementor-location-footer as you mentioned, because my footer is a Elementor Template.
Not sure about this code, if the footer is very large (with sitemap), and changing its size in responsive-mode? Then there would be no fixed pixel size for the footer height, right?
Just tried it on another side, which uses an overlay menu and two different footer templates (one for the home-page, only with social icons, which is about 100px) and one for the rest of the site (which has a sitemap and a much larger pixel count).
One thing I ran into: Had to adjust the Z-Index of the overaly menu (to at least 3).
Another is to adress the two different footer Templates with differenz margins, because of their different pixel heights.
And the second margin would have to be flexible at least for mobile, because of the sitemap I used 3 columns for.
Do you have any idea how to adress specific templates? All I can find is the template ID number.
And maybe you know how to set the margin and height to the flex site of the (sitemap) footer?