Disable Sticky Footer menu css

Hi, a while back ago we made the site Footer sticky, now that the site is much more developed, it seems to be a bit of an issue interms of amount of page available to the customer vs what they can visually see. This is even more of an issue on mobile devices where the screen size is limited.

Therefore is it possible to disable the sticky menu (footer only)

I want to keep the top menu the same (still sticky) so only change the footer menu (white one with the cloud)

I have had a search through the CSS searching foor anything footer related see here - http://pastebin.com/zPeM0cW9 (expires 1 week time)

(is possible to make the footer sticky on one page only? can it be sticky for this page Upload files page http://tinyurl.com/jfdx5t4 it seems to generate a custom url each time e.g. http://www.mydomain.com/product/portfolio/?show=uploads&vpid=150&ck=ca21e31dbca320d7c2eeb5e5e090472a ) - http://take.ms/qcoUE

Domain - http://tinyurl.com/ounlhnf
Screenshot - http://take.ms/BRUxh

Thanks
Tom

  • Rupok

    Hi Tom

    Hope you had a wonderful day.

    Therefore is it possible to disable the sticky menu (footer only)

    Do you want to disable the "stickiness" of thee footer menu or do you want to hide it totally? Both is possible.

    To hide it totally, you can use the following custom CSS Code:

    #foot_wrapper {
      display: none;
    }

    To disable the "stickiness", I added the following custom CSS Code:

    #foot_wrapper {
      position: relative !important;
    }
    .site-footer::before {
      bottom: 118px !important;
      height: 0;
      position: relative !important;
    }

    is possible to make the footer sticky on one page only? can it be sticky for this page Upload files page http://tinyurl.com/jfdx5t4

    Yes, possible. I've added the following custom CSS code to make the foother sticky only on that specific portfolio page, but going bottom on other pages:

    .postid-22 #foot_wrapper {
      bottom: 0 !important;
      position: fixed !important;
      width: 100%;
      z-index: 999;
    }
    .postid-22 .site-footer::before {
      bottom: 63px !important;
      content: url("http://www.boltprints.com/wp-content/uploads/2015/11/Clouds-up-1024x95.png");
      display: block;
      left: -15px !important;
      position: fixed !important;
      top: auto !important;
    }

    Please let us know if you still have any confusion. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Tom

    Hi Rupok,
    Thanks very much for those CSS codes, just cleared cache and checked the site, Most pages are perfect with the footer in the bottom of page as it should be but the portfolio product page - http://tinyurl.com/j5nbnc8 still has the footer sticky. screencast - http://take.ms/6Bz5Y

    I think might be related to the Post ID 22? the upload file page is the part that needs the sticky footer not the product page, but i think these might be linked? Having looked bit further at the other two product pages, the footer and the view basket button seems to work very well like that, so just going to remove the Last CSS code, as think its perfect like that.

    Thanks very much again

    Tom

  • Tom

    Hi Rupok,
    Just removed the 2nd CSS code which seems to make it much better, i have another issue that has arisen, the cloud in the footer seems to be breaking the page width, allowing the user to scroll out and breaking the page being viewed. is there a way to crop that cloud graphic when being viewed on mobile devices? so that it displays centred in the page (horizontally) but cropped so that anything on either side left or right does not show and does not allow the user to zoom out of the page further?

    Screenshots + changes
    - http://take.ms/w3tu5
    - http://take.ms/lZl2H
    - http://take.ms/gGpIf

    Thanks
    Tom

  • Rupok

    Hi Tom

    You said:

    is possible to make the footer sticky on one page only? can it be sticky for this page Upload files page http://tinyurl.com/jfdx5t4

    That's why I've added those extra code to make the footer sticky on that one specific page. You are right. If you remove the code block starting with post ID 22, it will be good. I found you did it already. Still there were some issues for your cache. I cleared cache, and looks good now on desktop.

    About the last issues at mobile devices you mentioned, I've added some more CSS at the bottom to fix those. Can you please check and confirm?

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.