2

I want to fix my header for my magento site. Please get me some solutions so that I will be helpful

2 Answers 2

8

Add code in your header.phtml or footer.phtml

<script>
jQuery.noConflict();
    jQuery(window).scroll(function() {
    var height = jQuery(window).scrollTop();

    if(height  > 150) {
        jQuery('#header').addClass('fixed-menu');
    }else{
        jQuery('#header').removeClass('fixed-menu');
    }
});

</script>
<style>
    .fixed-menu{ 
        position: fixed;
        z-index: 9999999999;
        width: 100% !important;
    }
</style>
4
  • Can't praise you enough. This little gem saved me hours of development! Thank you.
    – Craig
    Oct 26, 2016 at 12:18
  • @prashant Valanda nice one! but i am getting an error that jquery is not defined however there is already a script in jquery. Can you plz tell me why this is happening?
    – tech_geek
    Oct 16, 2017 at 11:57
  • May be your jquery loaded after given script Oct 17, 2017 at 6:43
  • @PrashantValanda, there is no id element with "header", how this will work? Oct 7, 2019 at 6:25
1

I personally would not install an extension for something this simple. Dig your hands in CSS file, and have a look there:

http://cssreset.com/creating-fixed-headers-with-css/

There is plenty of tutorials over the net to achieve what you are after. Also, do remember that you will probably need a bit of wiggling if you are using a custom theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.