[Resolved] Back to top arrow (since latest GP update) pointing downwards

[Andrei]

Hello folks,

David advised me to create a new topic about the back-to-top arrow.
I’ve got 2 websites using the generatepress, and on one of them the icon is pointing downwards instead of upwards 🙂

Shared 2 urls in the section below, for further details.

Cheers

[David]

Any chance you can disable the Litespeed cache on the problem site ?

[Andrei]

How come I didn’t think about that.. most likely it’s the caching plugin indeed as that’s the only major difference between the sites.

Unfortunately, I’m not the only one managing the sites and I’m not allowed to disable the plugin. I’ll mark this ticket as solved then 😀

Thanks, David for mentioning the plugin.

Cheers

[David]

Yeah there was some CSS left over i assume before the last update.
Glad to be of help.

[Andrei]

Yeah, you’re right.

Disabled litespeed for a bit, cleaned CDN cache and the arrow is fine. Once I re-enable litespeed, the arrow is inversed again – guess I can live with that. At least the cause is known now 🙂

Cheers

[David]

If you want i can provide some CSS to resolve that? Will need to see the site again though ( Resolving a topic removes the private info ).

[Andrei]

Sure thing! if there’s some css magic to solve it why not 🙂
I put again the website url in the private section.

Cheers David!

[Leo]

Try this CSS:

.generate-back-to-top .gp-icon svg {
    transform: none;
}

[Andrei]

Thanks Leo!

Works like a charm!!

[Leo]

No problem 🙂

[vast]

Hi Leo, David,

When applying the filter generate_back_to_top_output, it appears to change the HTML span class from span class="gp-icon icon-arrow-up"> to `<span class=”gp-icon icon-arrow”>.

This results in the arrow facing down rather than up. Is there a an additional attribute so that it generates the relevant HTML elements.

add_filter( 'generate_back_to_top_output', 'tu_custom_back_to_top_icon' );
function tu_custom_back_to_top_icon() {
    printf(
		'<a title="%1$s" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
				<span class="screen-reader-text">%5$s</span>
				%6$s
			</a>',
			esc_attr__( 'Scroll back to top', 'generatepress' ),
			absint( apply_filters( 'generate_back_to_top_scroll_speed', 400 ) ),
			absint( apply_filters( 'generate_back_to_top_start_scroll', 300 ) ),
			esc_attr( apply_filters( 'generate_back_to_top_icon', 'fa-angle-up' ) ),
			esc_html__( 'Scroll back to top', 'generatepress' ),
			generate_get_svg_icon( 'arrow' )
	);
}

[Tom]

You should just need to replace this:

generate_get_svg_icon( 'arrow' )

With this:

generate_get_svg_icon( 'arrow-up' )

Let me know 🙂

[vast]

Thanks Tom. That worked! It wasn’t in any of the documentation we could find.

Would it also be possible to move inline element styles e.g. style="opacity:0;visibility:hidden;" that is currently included as an attribute in

<a title="Scroll back to top" aria-label="Scroll back to top" rel="nofollow" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="400" data-start-scroll="300">

to an externalized CSS file in the next release?

The reason is that when content security policies are applied, inline CSS styles are blocked from executing unless they are accompanied by a SHA hash for instance.

[Tom]

Will add it for review in 3.1 🙂

[vast]

Great. Thanks for looking into it. It’ll go a long way to minimizing console errors and blocked resources.

[Author]

Posts