---

Step 1. Open Weebly's HTML/CSS Editor

Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.

---

Step 2. Add HTML code

Since our demo site is on a free Weebly account, we don't have access to the footer that comes with the theme. So instead, we need to create our own drag and drop footer.

​On the left under "HEADER TYPE", choose the page layout you wish to add the fixed footer to. On the right, add the HTML code below directly above your theme's inherent footer <div> tag:

​<div id="fixed-footer">
    <div class="container">{fixed-footer:content}</div>
</div>​

​​Note: If you want the fixed footer on all page layout of your site, repeat this step for each page layout.

---

Step 3. Add CSS codes

On the left, under "STYLES", click on your CSS file "main.less" (main-style.css for older Weebly themes). On the right, add the following CSS codes to your CSS file:

/* Fixed Footer
--------------------------------------------------------------------------------*/
#fixed-footer {
    position: fixed;
    left:0;
    bottom: 0;
    background: rgba(250,250,250,0.9); /* Changes fixed footer's background color */
    width: 100%;
    z-index: 10;
    border-top: 1px solid #eee; /* Fixed footer's top border */
}

#fixed-footer .container {
    padding:1.5em; /* Fixed footer's spacing between content and edge */
}

Click save.

---

Step 4. Add Weebly elements

Once you're back in the Weebly Editor, grab some elements from the left and drop them into your new fixed footer!

---

You're done! Publish your site to see your new fixed footer!

---

Advanced option 1: Slide up on scroll

To have your fixed footer slide up as the page is scrolled, add the orange CSS codes below to the CSS codes you added to your CSS file from step 3:

​​​/* Fixed Footer
--------------------------------------------------------------------------------*/
#fixed-footer {
  position: fixed;
  left:0;
  bottom: -500px;
  background: rgba(250,250,250,0.9);
  width: 100%;
  z-index: 10;
  border-top: 1px solid #eee;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

#fixed-footer .container {
  padding:1.5em;
}

#fixed-footer.slide {
  bottom:0px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

Once you've added the new CSS codes from above, add the following jQuery code under "Settings>SEO>Footer Code". Adjust the orange '10' to change how many pixels from the top the page must be scrolled before the fixed footer slides up:

​<script>
$(window).scroll(function () {
      $('#fixed-footer').toggleClass("slide", ($(window).scrollTop() > 10));
  });
</script>

---

​Advanced Option 2: Mobile behavior

If you would like the fixed footer to not be fixed for the mobile version of your Weebly site, add the orange CSS code below to the CSS codes you added to your CSS file from step 3:

​​/* Fixed Footer
--------------------------------------------------------------------------------*/
#fixed-footer {
    position: fixed;
    left:0;
    bottom: 0;
    background: rgba(250,250,250,0.9); /* Changes fixed footer's background color */
    width: 100%;
    z-index: 10;
    border-top: 1px solid #eee; /* Fixed footer's top border */
}

#fixed-footer .container {
    padding:1.5em; /* Fixed footer's spacing between content and edge */
}

@media screen and(max-width:767px) {
  #fixed-footer {
      position:relative;
      bottom:0px!important;
  }
}

To completely shut off the fixed footer and have it not appear on the mobile version of your website, add the orange CSS code below to the CSS codes you added to your CSS file from step 3:

​​/* Fixed Footer
--------------------------------------------------------------------------------*/
#fixed-footer {
    position: fixed;
    left:0;
    bottom: 0;
    background: rgba(250,250,250,0.9); /* Changes fixed footer's background color */
    width: 100%;
    z-index: 10;
    border-top: 1px solid #eee; /* Fixed footer's top border */
}

#fixed-footer .container {
    padding:1.5em; /* Fixed footer's spacing between content and edge */
}

@media screen and(max-width:767px) {
  #fixed-footer {
      display:none;
  }
}

---

comments powered by Disqus