[Resolved] Back to top customization

[Richard]

Correct 😀 Sorry!

[David]

haha my bad… i did think why would anyone want it on screen all the time lol!
Ok you’ll have to bear with me, it lives in its own hook. So i all see if we can generate it as a static element in the footer… hmmm

[Richard]

And if we turn off the footer in GP and put the GP button in an Elementor widget? Just a thought.

[David]

OK – found it:

https://generatepress.com/forums/topic/moving-back-to-top-button/#post-330500

Just need to tweak the CSS and add the right: calc(50% - 20px); property to horizontally center it.

[Richard]

I think that did the trick!

I added the snippet:

add_action( ‘after_setup_theme’,’tu_move_back_to_top’ );
function tu_move_back_to_top() {
remove_action( ‘wp_footer’,’generate_back_to_top’ );
add_action( ‘generate_before_footer_content’,’generate_back_to_top’ );
}

This CSS:

.site-footer {
position: relative;
margin-top: -100px;
}

a.generate-back-to-top {
position: absolute;
top: 40px;
bottom: auto;
}

Notice, that I had to a negative top margin to the site footer, because it had created a white space below the site content.

Thanks, again, Dave!

Would you mind checking it on your end?

[David]

Yep, looking good at my end!
Glad we got there in the end.

[Richard]

Oh, crud! On the subpages it added the back-to-top twice! Over the email address box in the footer.

[Richard]

And minus margin has the content stuck below the footer.

[Richard]

I know why! back in a bit lol

[David]

OK the second icon is a actually an icon you have in the elementor content.
Can try moving it after the widgets using the generate_after_footer_widgets hook

[Richard]

I deleted the global Elementor global footer (the home page wasn’t in the condition), and added the footer in the global Elementor page template. Then I deactivated all elements and made it full-width (which I could have done globally in the new GP options!), and that did it!

It sometimes makes sense not to create global footers or headers in Elementor, and instead just make them part of a page template.

[Richard]

The only is that when it scrolls to the top, it doesn’t go all the way to the top for some reason.

[Tom]

I think that’s because there’s two scrollbars on the page. Any particular reason for that?

[Richard]

Hey Tom!

Not that I believe. Any ideas how to eliminate one or the other?

Thanks!
Richard

[David]

It looks like this CSS is causing that:

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

Removing the overflow from the html gets rid of it.

[Author]

Posts