Archived topic
Down arrow in top full width/height container
3 replies · Started by Michael on September 15, 2021
Hello
I am currently trying to find a nice solution while implementing an arrow within my section (please check the private section to see the URL).
Saw 1-2 previous but quite old threads here with a similiar topic, however, I am not quite happy with the current solution done within the container and an arrow down button with padding top of 350px.
Is there a better solution to implement this which makes it float at the bottom of the top fullscreen section no matter what screen size we have?
I tried to have the arrow as a background image but this was always hidden behind the current fullscreen background image (even if I changed the z-index value).
Thanks a lot
Michael
Hi Michael,
You can set the container Minimum Height to 100vh under the Spacing tab.
https://www.screencast.com/t/5g3atMlKZ
Also add thebuttons block to this container as well, set the vertical alignment to bottomfor this container.
https://www.screencast.com/t/I6btEvPZupe7
Let me know if this helps :)
Hi Ying
Sorry for my late reply, I had to wait for the customer to response as well.
I think the button/arrow down is positioned nice now. In addition, I would like to hide it on scroll using JavaScript.
By using the following code I thought it should work, but unfortunately it does not:
// Function to let the arrow down disappear after scroll
add_action('wp_footer', 'disappear_on_scroll_script', 9999);
function disappear_on_scroll_script() {
?>
<script>
$(document).ready(function(){
$(".scroll-down-disappear").click(function(){
$("a").addClass("scroll-down-disappear");
$("#arrow-down-icon").hide();
});
$(window).onscroll(function() {
if ($(this).scrollTop() > 0) {
$("#arrow-down-icon").hide(); // Hide the element
}
});
})(jQuery);
</script>
<?php
}Any idea what I am doing wrong here?
Thanks a lot
We are happy to help with theme related questions, but this is beyond the scope of this forum.
Please refer to this:
https://generatepress.com/what-support-includes/
Thanks for your understanding :)
