Adding a down arrow to cover blocks – jQuery

// screen height and down arrow
var covercounter = 1;
$(".wp-block-cover.down-arrow").each(function() {
	var idlabel = covercounter++ ; 
     $(this).after('<div class="no-margin-top-and-bottom" id="' + idlabel + 'after"></div>');
     $(this).find('.wp-block-cover__inner-container').append('<div class="down-arrow-button"><a href="#' + idlabel +'after"><span class="screen-reader-text">Scroll down</span></a></div>');
});

SCSS

.down-arrow-button {
	text-align: center;
    display: block;
    width: 100% !important;
	a {
		color: white;
		text-align: center;
		display: inline-block;
		position: relative;
		width: rem-calc(30);
		height: rem-calc(30);
		background-image: url('./images/icons/icon-down-arrow.svg');
		background-repeat: no-repeat;
		.screen-reader-text {
			color: #000;
		}
	}
}

Search the site

Newsletter

Subscribe to get regular news and updates

  • This field is for validation purposes and should be left unchanged.