Make Magento2 header sticky from Admin Panel

Want to make your magento2 header Sticky without making any changes to xml files, css files or javascript files, directly from the admin panel? Read on:

  1. Go to Admin -> Content ->Configuration 
  2. Choose your store or store view -> edit
  3. Open HTML Head section and add the below code to the Script and Style Sheet box: 
<style>
header.sticky {
background: #fff none repeat scroll 0 0;
border-bottom: 4px solid #325052;
margin: 0 auto;
max-width: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
</style>

You can make changes to the style as you need

4. Now to to Footer and open the Miscellaneous HTML box. Add the below code :
<script>
require([ "jquery" ], function($){
$(window).scroll(function () {
if( $(window).scrollTop() > $('header').offset().top && !($('header').hasClass('sticky'))){
$('header').addClass('sticky');
} else if ($(window).scrollTop() == 0){
$('header').removeClass('sticky');
}
});
});
</script>

That’s it. Now clear the cache and reload the frontend and you should see the sticky header.

Tested on Magento 2 upto Magento 2.3.4 and it works.

If you face any issues, let me know using the comment box

Updated: August 4, 2020 — 6:21 pm

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.