ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• May 12, 2015 at 10:47 pm #174272
  hankplayer

  Member

  Post count: 9

  I’m interested in applying a sticky footer to my site. I have tried various tutorials using css but haven’t had any luck getting them to work for me.

  I would like to keep the footer pushed to the bottom of the browser on pages that don’t have enough content (especially on product categories that don’t have any items). Attached is a screenshot of a page with the footer in the middle of the browser window.

  I like this option: http://mystrd.at/modern-clean-css-sticky-footer/

  But I’m not sure how to implement it on my site. Can you please help me modify to code to use with Atelier.

  Attachments:

  You must be logged in to view attached files.
  May 13, 2015 at 6:56 am #174319
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Add this to your custom css:

  #main-container {
    min-height: 500px;
  }

  – Kyle

  May 13, 2015 at 5:02 pm #174662
  hankplayer

  Member

  Post count: 9

  Thanks Kyle! That worked great.

  May 13, 2015 at 5:08 pm #174668
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Great. Thanks Kyle.
  -Rui

  May 19, 2015 at 8:38 pm #176661
  hankplayer

  Member

  Post count: 9

  I just tested the site on a retina display iMac and ran into the same problem of having the footer pushed up on the page. I assume this will be the case on larger/higher resolution screens. I raised the min-height to 800px, which fixed it on iMac but was too much on a laptop and regular display.

  Is there a way to do a true sticky footer?

  I found this option: http://mystrd.at/modern-clean-css-sticky-footer/ and this option: http://ryanfait.com/sticky-footer/ but I don’t know exactly how to implement it using Atelier’s CSS.

  May 21, 2015 at 7:53 pm #177484
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Hi

  Those example are for very basic structure. They won’t work with the complex structure of our theme.

  – Kyle

  May 21, 2015 at 7:59 pm #177486
  hankplayer

  Member

  Post count: 9

  Thanks Kyle. Is there any way to add this type of option to an upcoming update?

  May 22, 2015 at 12:26 am #177507
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  Will forward it to the development team so they can analyze and consider for a future update.

  -Rui

  May 22, 2015 at 12:54 pm #177764
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi @hankplayer

  It’s a tricky thing to sort as there are so many varying factors. You can try this css though:

  #footer-wrap {
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  #main-container {
    padding-bottom: 335px; /* This needs to be the same or larger than your footer height */
  }

  – Ed

  June 2, 2015 at 6:44 pm #180854
  hankplayer

  Member

  Post count: 9

  Hi Ed,

  The CSS you provided unfortunately didn’t work. I fiddled around with using a variation of the code that is currently on our main, non WordPress site (www.hankplayer.com), I was able to come up with a solution that worked.

  This works by pushing the footer down to stick to the bottom of the browser window on pages that don’t have enough content to fill the page but if the content is more than what will fit in the window, the footer behaves normally.

  The CSS I used was as follows:

  /* --------------------------------------------
  	STICKY FOOTER
  -------------------------------------------- */
  
  #main-container {
  	padding-bottom: 220px; /* must be same height as the footer */
  }
  
  #footer-wrap {
      width: 100%;
  	height: 220px;
  	bottom: 0;
  	left: 0;
  	background: #5a5a5a;
  	position: absolute;
  	margin-top: -1340px; /* negative value that pushes footer to bottom of window */
  }

  June 3, 2015 at 1:52 am #180944
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Glad you found a solution, thanks for posting it.

  – Ed

• Back to forum

  Posted in: Atelier