Magento – Magento 2 how to make sticky navigation top menu for frontend

magento2

I am using Magento2 and I need to make header sticky for the frontend .how can I make header sticky?
When user scroll page then header should be sticky at the top, how we can do this? this code should apply for desktop view only not for a mobile and iPad view.
enter image description here

Thanks in advance.

Best Answer

in header.phtml in your theme add this:

<script type="text/javascript">
require([ "jquery" ], function($){
    $(document).scroll(function () {
        var $window = $(window);
        var windowsize = $window.width();
        var height = $(document).scrollTop();
            if(height  > 150 && windowsize >= 768) {
                $('your header class').addClass('fixed-menu');
            }else{
                $('your header class').removeClass('fixed-menu');
            }
    });
});
</script>
<style type="text/css">
    .fixed-menu{ 
        animation-duration: .45s;
        animation-fill-mode: both;
        animation-name: fadeInDown;
        position: fixed;
        z-index: 500;
        width: 100% ;
        top:0;
        border-bottom: 1px solid #ccccb3;
    }
</style>

hope this will helps you.

Related Topic