Docs

[WoodWatchCo]

Can someone please help me achieve an effect for my footer to make it float at the bottom and be sticky at all times but only to be visible AFTER scrolling?

[WoodWatchCo]

This reply has been marked as private.

[WoodWatchCo]

To clarify, that’s the footer which contains my social media share buttons. I want it to float at the bottom of the screen AFTER scrolling.

[Rahul]

Hey There,

Thanks for writing in!

Add following code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  var $main = $('.x-main'),
      $windowHeight = $(window).outerHeight(),
      $masthead = $('.masthead').outerHeight(),
      $wpbar = $('#wpadminbar').outerHeight(),
      $footer = $('.x-colophon.bottom').outerHeight() + $('.x-colophon.top').outerHeight();
 
  $main.css('min-height', $windowHeight - $masthead - $wpbar - $footer - 70);
});

Hope this helps. 🙂

Thank you.

[WoodWatchCo]

Thanks but that did not work to achieve the floating footer social share bar after scroll.

[Rue Nel]

Hello There,

Thanks for updating in! It sounds like you might be having an issue with a third party plugin, Social Warfare. Regretfully, we cannot provide support for third party plugins like this Social Warfare plugin as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[WoodWatchCo]

Another idea, I have removed the social share buttons from my footer. But I’d like to dorce the footer to the bottom of the page even on short pages. For example https://sharkwatch.co/blog/ shows the footer in the middle of the screen. I’d like a NON fixed footer forced to the bottom at all times.

[Rad]

Hi there,

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

@media ( min-width: 980px ) {
.x-colophon.bottom {
    position: absolute;
    bottom: 0;
    width: 100%
}
html {
    height: 100%;
    padding-bottom: 60px;
}
}

Hope this helps.

[Author]

Posts