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 'Free Divi Community Forum' 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 Create stunning carousel for Divi sites: https://divi.help/link-forums/divi-carousel.153/
  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 Create gorgeous Divi slide-in promo bars, notification bars, etc: https://divi.help/link-forums/divi-bars.150/
  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 more variety for your Divi header (12 premade styles): https://header.diviultimate.com/
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    1. AD Tons of premade layout & section designs + functionalities for your Divi site: https://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 Add more variety for your Divi header (12 premade styles): https://header.diviultimate.com/
  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
    Last edited: May 27, 2020
    1. AD Speed up your Divi site with Divi specific cache plugin: https://divi.help/link-forums/divi-rocket.160/
  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 Access 2000 icons from Font Awesome & Material Icon set in Divi: https://divi.help/link-forums/divi-icon-king.154/
  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