-
Posts
-
Hi, there–
We created a background image and using Quick CSS replaced the default back to top arrow. Please see Private Content for a link to an example page. You’ll see we have the back to top arrow in the center of the socket and instead of a ‘box’ it has a yellow cloud background. I actually have two questions about this:1) Is it possible to hide the back to top arrow when the page is short and therefore the arrow is not needed? I think the default Enfold arrow naturally works that way, but I think we are missing something since changing it in Quick CSS.
2) On mobile the socket items are not centering and spacing very well. The placement of the arrow varies for each of the mobile devices, which is driving us crazy. The social media icons and about us text link that are on the left of the socket in desktop view are getting overlapped by the right side logo image on mobile view. Any suggestions for straightening that out and being consistent?Thank you for your help.
Hey GWS,
Thank you for using Enfold.
Yes, that’s possible. You can check for the height of the “body” container. Remove the arrow if the body height is equal or less than a certain value. Please add the following code in the functions.php file.
// custom script add_action( 'wp_footer', 'ava_custom_script' ); function ava_custom_script() { ?> <script type="text/javascript"> (function($) { function a() { var height = $('body').innerHeight(); if( height <= 620 ) { $('#ch-backtotop').remove(); } } a(); })(jQuery); </script> <?php }The arrow will be removed if the body container height is equal or less than 620px. Remove browser cache or hard refresh before checking the page.
Best regards,
Ismael
- The topic ‘Hide back to top arrow on shorter pages / Center arrow in socket’ is closed to new replies.