1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

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. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  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. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  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. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  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. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  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. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    Have you added their jQuery code?
     
  10. YaizaMartinez

    YaizaMartinez New Member

    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  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. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  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