Support » Theme: Twenty Nineteen » Fixed footer

  • Resolved Brogaard

    (@jenzgaard)


    Hi, normally this will work:

    .site-footer {
    position:fixed;
    left:0px;
    bottom:0px;
    height:350px;
    width:100%;
    background:#999;
    }

    in order to make the footer look as if its hidden until the paragraph ‘content is queen’ is reached. But the footer reveals itself already after the featured image almost at the top.
    In other words, first at the very buttom of the page the footer should appear and not scroll.

    Looking forward to any suggestions…

    • This topic was modified 7 months, 1 week ago by  Brogaard.
    • This topic was modified 7 months, 1 week ago by  Brogaard.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Does it not do that already if you remove your CSS?

    Have a look at this footer example: https://revolution.fuelthemes.net/revolution-classic/

    Hidden, then revealed but static.

    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    They’ve also got some padding on the body element that you may not have seen. The padding is set to the height of the footer using JavaScript. In their case at desktop, the height is 502px.

    Thx Andrew (I’ve found 503…?).

    But does that explain why the footer is covered by the featured image since I can control the footer height with:

    .site-footer {
       height:350px;

    Also, when testing:

    .page {
    	padding-bottom:500px
    }

    The page (as set by now) only scrolls further up but the footer is still visible when scrolling the page.

    • This reply was modified 7 months, 1 week ago by  Brogaard.
    Moderator Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I think you’ve achieved what they have, but they just have a bunch of layers on top of the footer. Layers that have opaque background colours, so you never get to see the footer until you get past those layers. Twenty Seventeen doesn’t have background colours on all of the sections of content.

    1) Sort out the layering using relative positioning with z-index
    2) Add background colours to those layers

    I.e.:

    
    .site-content {
        background: white;
        position: relative;
        z-index: 1;
    }
    

    Hi Andrew, finally made it by using your code plus changed .page to body.page – otherwise far to much white space. That’s the whole syntax to make a static footer:

    .site-footer {
      display: block;
    	position: fixed;
    	left:0px;
      bottom:0px;
      height:450px;
      width:100%;
    	background:#999;
    }
    
    body.page {
    	padding-bottom:450px;
    }
    
    .site-content {
    	background: white;
    	position: relative;
    	z-index: 1;
    }

    Very useful for the future.

    Thanks for your help! Wish you lots of Karma and a beer in Copenhagen 🙂

    • This reply was modified 7 months, 1 week ago by  Brogaard.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Fixed footer’ is closed to new replies.