Hướng dẫn tạo Sticky Header với Astra

Với các trang có nội dung quá ít, bạn có thể tạo Sticky Footer để tạo cảm giác dung hoà cho trang hơn.

Tạo Sticky Footer bằng Astra Theme Free

Chèn code PHP vào functions.php trong Child theme bằng Theme Editor

<?php // don't copy this line in your code.
add_action( 'wp_footer', 'astra_footer_align_bottom' );
function astra_footer_align_bottom () {
?>
<script type="text/javascript">
document.addEventListener(
"DOMContentLoaded",
function() {
fullHeight();
},
false
);
function fullHeight() {
var headerHeight = document.querySelector("header").clientHeight;
var footerHeight = document.querySelector("footer").clientHeight;
var headerFooter = headerHeight + footerHeight;
var content = document.querySelector("#content");
content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
}
</script>
<?php
}

Tạo Sticky Header bằng Custom Layout (Astra Pro)

Bạn có thể dùng Page Builder để dễ dàng tạo Footer hơn

Astra Footer sticky