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

Question

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.

Thanks in advance.

Answer 1

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.

Answer 2

You need to add the custom CSS in your stylesheet if its not already there. Here is sample example: https://www.w3schools.com/howto/howto_js_sticky_header.asp Hope this will help? Else comment your link I will share the exact CSS code for you.