Wordpress creating a sticky footer

HTML & CSS
#1

Hi!

I am working on a wordpress website and want to implement a footer that is pushed to the lower edge of the browser screen if the content get´s smaller than the browser screen hight.

I want to use this approach:

Now I am looking for an effective way with CSS and HTML to implement that for 2 different page types and one media query breakpoint. I am using Code Snippets Plugin to place my code:

add_action( 'wp_head', function () { ?>
<style>


:root {
  --FooterHight: 157px;
  --secondary-bg-color: gold;
}



@media only screen and (min-width: 768px)  {

body(.home)  {

         --HeaderHight: 288px;

         .page-content {
           min-height: calc(100vh - (HeaderHight + FooterHight));         /* 445px */
         }
}


body:not(.home)
         --HeaderHight: 63px;

         .page-content {
           min-height: calc(100vh - (HeaderHight + FooterHight));         /* 220px */
         }
}




@media only screen and (max-width: 768px)  {

body(.home)  {

         --HeaderHight: 248px;

         .page-content {
           min-height: calc(100vh - (HeaderHight + FooterHight));         /* 405px */
         }
}

body:not(.home)
         --HeaderHight = 63px;
         
         .page-content {
           min-height: calc(100vh - (HeaderHight + FooterHight));         /* 220px */
         }
}

</style>
<?php } );

Now with this nothing happens… I kind of think there is still some syntax issues I can not find… or some addressing not working properly… any idea what´s wrong here…

Pagelink is:
https://spehzies.haywood.de/kontakt/

#2

You seem to be mistaking some SASS for CSS as those rules are not valid css and won’t work natively.
You also have a few typos such as.

--HeaderHight = 63px;

and

body(.home)

Which should be:

--HeaderHight:63px;
body.home

You seem t be confused because the :not rule does need brackets.

body:not(.home)

There are always some missing brackets but that may be because you copied SASS rather than CSS.

This is the code I think you were trying to place.

:root {
  --FooterHight: 157px;
  --secondary-bg-color: gold;
}

@media only screen and (min-width: 768px) {
  body.home {
    --HeaderHight: 288px;
  }

  body.home .page-content {
    min-height: calc(100vh - (var(--HeaderHight) + var(--FooterHight))); /* 445px */
  }

  body:not(.home) {
    --HeaderHight: 63px;
  }
  body:not(.home) .page-content {
    min-height: calc(100vh - (var(--HeaderHight) + var(--FooterHight))); /* 220px */
  }
}

@media only screen and (max-width: 768px) {
  body.home {
    --HeaderHight: 248px;
  }
  body.home .page-content {
    min-height: calc(100vh - (var(--HeaderHight) + var(--FooterHight))); /* 405px */
  }

  body:not(.home) {
    --HeaderHight: 63px;
  }
  body:not(.home) .page-content {
    min-height: calc(100vh - (var(--HeaderHight) + var(--FooterHight))); /* 220px */
  }
}

Bear in mind that making a sticky footer like that is outdated and prone to break. There is no need for magic numbers or accounting for header and footer height as flex will do that automatically and in a responsive setting so you wouldn’t need media queries for different heigh headers and footers. However you do need the right structure to start with rather than trying to bolt things on at the end.

Here is a minimalist example of the best sticky footer in the world.

2 Likes
#3

Looking at your page (wow so many divs) I think you can get a sticky footer with just this code:

#wrap{
display:flex;
flex-direction:column;
min-height:100vh;
}
.site-main{flex:1 0 0%;}

You don’t need any of that stuff you were playing with and it will completely automatic regardless of header and footer heights.

It will need testing though as your page is a monster page for what could be accomplished in a few lines of code. I know wordpress sites are verbose and sometimes a necessary evil but wow how many divs do you really need.:slight_smile:

There may also be issues as you have some sort of scrolling/motion routines that are changing heights and translating elements on the fly. Not to mention quite a spread of min-heights with vh units in place.

1 Like
#4

Paul! That´s amazing!! Thanks so much! Your short snippet just works perfectly!

And yes. I know that looking at the code must be horrifying for a pro coder. As I come from a complete no code perspective and just use tools that let me avoid writing code, I only slowly start to learn what I can exchange with just a few lines of code.

So keep up the faith with me I am looking forward to learn more about the true religion!

1 Like
#5

oh… just found out that the imprint and privacy pages do not seam to have a the right classes and IDs the script of your´s adresses…

Do you quickly see how I need to extend your code to fix that?

#6

Do you have a link to those pages so I can see their structure?

#7

https://spehzies.haywood.de/datenschutzerklaerung/

https://spehzies.haywood.de/imprint/

they both seam to lack the .site-main class

#8

Those pages have the right structure but I couldn’t find unique classes on the elements so if these classes are dynamic or change you will need to use a unique class. Basically you just have to apply the flex rule to the middle element wrapper which makes it push the footer down and the header up.

/*imprint page*/
.elementor.elementor-36.dce-elementor-post-36 {
flex:1 0 0%;
}
.elementor-36 .elementor-element.elementor-element-5dcced94{
padding-bottom:5px; /* you had 20% bottom padding which seems to be a waste of space*/
}

/* privacy page */
.elementor.elementor-3.dce-elementor-post-3{
flex:1 0 0%;
}

To explain the method a bit the the structure needed is that you have three direct children of #wrap. e.g. Header, main and footer. Then the main middle element gets the flex:1 0 0% and that automatically forces the footer to the bottom of #wrap which has a min-height of 100vh.

Hope that helps :slight_smile:

#9

Caramba! Just works! And thanks aswell for the hint with the “middle element wrapper” … makes me understand the whole thing better!

2 Likes