Hi ramsey1971,
I have added the following CSS code to the Site template Styles > your template > Tools > Custom code:
/**Dominic - Custom header*/
.t4-section-inner.container-fluid .header-block {
padding: 0;
}
.t4-header,
.t4-megamenu {
min-height: 70px;
}
.not-at-top #t4-header.t4-sticky.sticky {
position: fixed;
width: 100%;
}
And the following JS to the Global setting > custom code > Before </body>
<script>
$(document).ready(function() {
// Select the header element
var $header = $('#t4-header');
// Define the class to add
var stickyClass = 'sticky';
// Function to add the class when scrolling down
$(window).scroll(function() {
// Check if the page has been scrolled down
if ($(this).scrollTop() > 350) {
// Add the sticky class to the header
$header.addClass(stickyClass);
} else {
// Remove the sticky class if the page is at the top
$header.removeClass(stickyClass);
}
});
});
</script>
