Mobile Footer: Sticky?

Hello there,

In order to achieve that objective, could you please try to do the following?

1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

2. Paste the following to the “Scripts in header:” box

<style>
#mobile-footer{
  display: none;
}

#mobile-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #334C90;
  color: white;
  display: none;
  z-index: 1000;
  font-size: 24px;
  padding: 20px 0;
}

#mobile-footer a{
  font-weight: bold;
  display: block;
  color: #fff;
}  

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

  .site{
    margin-bottom: 30px;
  }

  #mobile-footer{
    display: block;
  }  

  .go-top.show {
    bottom: 76px;
  }  

}

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

  .site{
    margin-bottom: 0;
  }  

}
</style>

3. Paste the following code into the provided “Scripts in footer:” box

<script>
(function($){

  var mobileFooter = '<div id="mobile-footer">'+
                       '<a href="tel:+12063677663">'+
                       '<i class="fa fa-phone"></i>(206) 367-7663'+
                       '</a>'+
                     '</div>';

  $('body').append(mobileFooter);                   

})(jQuery);
</script>

4. Save settings

You would need to clear your web browser’s cache before reloading your site.

Regards,
Kharis