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. enter image description here

Thanks in advance.

• Juan Ignacio: Do it works in magento 2.3.5 too ? Because it seams there are different folders an structure. Also in back office content- config- header there are a field to add code for the header. Can works if I add there ?

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.

• Praful: Can you provide exact path ? I add in the header.phtml. but its not working for me
• MichaelHa: <your_theme>/Magento_theme/templates/html/header.phtml . If you do not have this file, override it.
• MichaelHa: please accept my answer to helps other dev.
• Praful: yes sure i will do..

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.