Hello guys, in this trick I will show you how you can make a sticky header in your WordPress website.
Sticky header will enhance the navigation experience on your WordPress site. It will remain the header part visible at the top of the page as users scroll down.
You can identify the header element in your theme’s header.php file. Ensure that the header structure is compatible with the fixed positioning style.
Add jQuery Script for Scroll Detection
To make the sticky header on the WordPress site, you have to add the following jQuery code to your theme’s footer.php file. I recommend you use the child theme, so you don’t lose your changes when you update the theme.
<script>
jQuery(document).ready(function($) {
var header = $('#headerId'); // Replace '#headerId' with your actual header ID or class
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
header.addClass('sticky');
} else {
header.removeClass('sticky');
}
});
});
</script>This code detects the scroll position, adding a CSS class (‘sticky‘) to the header when the user has scrolled beyond a specified point (e.g., 100 pixels).
Style the Sticky Header with CSS
In some cases, you also need to style your header according to your theme. So add the following CSS code in your theme’s style.css file.
#headerId.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background: #ffffff; /* Adjust background color as needed */
/* Add any additional styling for the sticky header */
}You can customize the styles to match your site’s design, adjusting colors, fonts, and other visual elements as desired.
You are done!!
More Tricks
Being Tricky 😉
