1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

Force global footer to be sticky at Divi 4.4.7

Discussion in 'Get Help On Divi Wordpress' started by YaizaMartinez, May 21, 2020.

  1. YaizaMartinez

    YaizaMartinez New Member

    Hi!

    I have tried to many CSS in order to keep my global footer sticky, however since the last theme update any of them is working anymore.

    Can you help me with that please?

    Thank you very much.
     
    1. AD Best plugin to easily integrate a Mega Menu into Divi: https://divi.help/link-forums/quad-menu.155/
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

  3. YaizaMartinez

    YaizaMartinez New Member

    Hi!

    Thank you for your prompt reply.

    I have tried the below code:

    #footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    }

    But doesn't seem to fix the issue in mobiles and tablets.

    Thx
     
    1. AD Power up your Divi sites with tons of new functionalities: https://divipowerful.divi.help/
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to remove the # symbol. So it should be just footer {
     
  5. YaizaMartinez

    YaizaMartinez New Member

    Hi! Remains like before still.

    Thank you again
     
    #5 YaizaMartinez, May 23, 2020
    Last edited: May 23, 2020
    1. AD Add tons of new icons for your Divi site. Free version available: https://divi.help/link-forums/divi-icons-pro.147/
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    1. AD Beautify your Divi archive / category page with premade design: https://archive.diviultimate.com/
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    From what I see, your custom CSS is missing a closing bracket & an extra closing bracket:

    #et-info-phone{display:none!important}}@media only screen and (min-width:981px){#main-header{height:45px!important}footer{position:absolute;bottom:0;width:100%}

    It should be:

    #et-info-phone{display:none!important}@media only screen and (min-width:981px){#main-header{height:45px!important}}footer{position:absolute;bottom:0;width:100%}
     
    1. AD Free download for Divi Mobile Bar Plugin: https://divi.help/threads/divi-mobile-bar-plugin-free.1579/
  8. YaizaMartinez

    YaizaMartinez New Member

    Thank you, I did something wrong when I minified the code I guess.

    EDIT: When I applied the corrected code, it was okay int he short pages, however, in the long ones the footer is again stuck over the text.
     
    #10 YaizaMartinez, May 27, 2020 at 9:44 AM
    Last edited: May 27, 2020 at 9:52 AM
    1. AD Awesome ways to display testimonials in your Divi site: https://divi.help/link-forums/testimonial-slider.148/
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    Have you added their jQuery code?
     
  10. YaizaMartinez

    YaizaMartinez New Member

    1. AD Feature-rich Divi eCommerce Child Theme for WooCommerce: https://divi.help/link-forums/royalcommerce.151/
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    If you checked the browser console, you will see that all the jQuery codes return error. It seems like your site is not loading the main jQuery file.

    Normally, I see such jQuery file on every Divi sites:
    Code:
    <script type="text/javascript" src="https://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp"></script>
    But I can't see it on your side. And this is why those jQuery code are not running.

    Not sure what's causing that. Perhaps a plugin conflict. You may try to enable Safe Mode & check the browser console & see if there's any error: WP Admin > Divi > Support Center > Safe Mode > Enabled

    Here's the browser console error:

    upload_2020-5-29_22-59-1.png

    In addition to the jQuery code, the tutorial requires you to add this CSS as well:
    Code:
    footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    }
     
  12. YaizaMartinez

    YaizaMartinez New Member

    I just tried the Safe Mode (https://www.dropbox.com/sh/0og44mc0omwlkqg/AADD83AIqQ3hH1IfHO1zu9yPa?dl=0) without success
    What might create the Jquery issue? I am working with a child theme, it might be the reason?

    On the other hand... The CSS should work by himself right?

    Thanks again!
     
    1. AD Use modules from the Extra theme with the Divi Builder: https://divi.help/link-forums/divi-extra.163/
  13. Divi.Help

    Divi.Help Administrator
    Staff Member

    The footer CSS only works for pages with short content. For pages with long content, you will need the jQuery to adjust it back to right location.

    Based on the look of it, your page jQuery file seem to load fine now. So, you should be able to use the tutorial CSS + jQuery to make it work.

    Just remember to change #main-footer to footer
     

Recommended Divi Hosting