[Resolved] Sticky footer

[Almog]

Hi there,

I’m looking to have a button sticky footer bar,
I created the element and used the different codes I found on some posts here
but I can’t seem to get it to work on my site.
I want it to show only on mobile\tablet and just to have a button.

The website is https://www.calgarygaragedoorsrepair.ca/

Thanks.

[Ying]

Hi Almog,

How did you add the button?

Can you try using a block element – hook, and choose after_footer as the hook name?
https://docs.generatepress.com/article/block-element-hook/

[Almog]

Hi Ying,

I added the button through both hook -> after_footer
added generate blocks container set to 100% with no margin
added button marked fill space
once that’s done this is the code I added to the CSS
@media screen and (max-width: 1000px){
#make-bottom-fixed {
display: block;
z-index: 2147483647;
height: 60px;
position: fixed;
bottom: 0;
left:0;
width:100%;
}}

Made sure to put the container css tag as make-bottom-fixed
and priority is set to 10.

[David]

Hi there,

i can see the button on the About page, but not the Home page, so you may need to check your Block Element display rules.
For the CSS try this:

@media(max-width: 1024px) {
    .make-bottom-fixed {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
    }
    body {
        margin-bottom: 55px;
    }
}

@media(min-width: 1025px) {
    .make-bottom-fixed {
        display: none !important;
    } 
}

[Almog]

Did that but still no, It’s weird because it does only show up on the mobile but it’s not sticky..
Is it because I’m using footer widgets?
I have that element and just 2 other elements one sending gtag conversions and the other is just for a service I’m using for heatmaps.

[Fernando]

Hi Almog,

Similar to David, I can only see the Button in the “About us” page. To clarify, are you wanting to display this button on the front page as well?

Moreover, can you confirm if you’ve created the button through a Block Element hooked to after_footer and if it’s displayed in the Front page?

Lastly, with the CSS provided by David, Blocks that have the class make-bottom-fixed should behave like this: https://share.getcloudapp.com/OAu8KdXB

I currently can’t see the CSS code added to your site. Can you try adding it in Appearance > Customize > Additional CSS?

Kindly let us know how it goes. 🙂

[Almog]

Hi David,
I attached the whole CSS code I have in Appearance > customize > additional CSS
Maybe something is blocking it?
But I just added the top bar code before this one and that one did work.

Also I re created the element through block > hook > after_footer,
I do see it on every page but it is just at the bottom of the page and not sticky.

/* GeneratePress Site CSS */ /* element dc - Site library CSS */

/* Control overflow on hero image */
.elementor-editor-active .overflow-x-hidden,
.overflow-x-hidden {
    overflow-x: hidden !important;
}

.grecaptcha-badge {
    display:none !important;
}

@media(max-width: 767px) {

    .no-abs-mobile,
    .elementor-editor-active .no-abs-mobile {
        position: static !important;
    }
}

/* no-mobile-bg-overlay - remove overlay on small devices */
@media(max-width: 1024px) {

    .no-mobile-bg-overlay .elementor-background-overlay,
    .elementor-editor-active .no-mobile-bg-overlay .elementor-background-overlay {
        display: none;
    }
}

/* Adjust button shadow and float animation */
.no-hover-shadow .elementor-button:not(:hover),
.button:not(:hover),
input[type="submit"]:not(:hover) {
    box-shadow: 0 15px 25px -12px rgba(2, 62, 83, 0) !important;
}

/* Reduce height of float animation */
.elementor-animation-float:active,
.elementor-animation-float:focus,
.elementor-animation-float:hover {
    transform: translateY(-4px);
}

/* Add Border to top of theme footer */
.site-footer {
    border-top: 1px solid #ccc
}

/* Theme Buttons */
.button,
input[type="submit"] {
    color: #FFFFFF;
    border-radius: 50px 50px 50px 50px;
    -webkit-box-shadow: rgba(2, 62, 83, 0.67) 0px 15px 15px -12px;
    padding: 20px 25px 20px 25px;
}

@media(min-width: 769px) {
    .top-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 99;
    }
    #sticky-navigation {
        top: 68px !important;
    }
@media(max-width: 1024px) {
    .make-bottom-fixed {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
    }
    body {
        margin-bottom: 55px;
    }
}

@media(min-width: 1025px) {
    .make-bottom-fixed {
        display: none !important;
    } 
}
}
 /* End GeneratePress Site CSS */

[Fernando]

There’s a syntax error.

This section has a missing } at the bottom:

@media(min-width: 769px) {
    .top-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 99;
    }
    #sticky-navigation {
        top: 68px !important;
    }

This has an extra code has an extra } at the bottom:

@media(min-width: 1025px) {
    .make-bottom-fixed {
        display: none !important;
    } 
}
}

So these code should be like these:

@media(min-width: 769px) {
    .top-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 99;
    }
    #sticky-navigation {
        top: 68px !important;
    }
}

@media(max-width: 1024px) {
    .make-bottom-fixed {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
    }
    body {
        margin-bottom: 55px;
    }
}

@media(min-width: 1025px) {
    .make-bottom-fixed {
        display: none !important;
    } 
}

Kindly correct these syntax errors and see how it goes. 🙂

[Almog]

Worked!!
Thank you so much!

[Fernando]

You’re welcome Almog! Glad it’s working now! 🙂

[Author]

Posts