I want to fix my header for my magento site. Please get me some solutions so that I will be helpful
2 Answers
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>
-
Can't praise you enough. This little gem saved me hours of development! Thank you.– CraigOct 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? Oct 16, 2017 at 11:57
-
-
@PrashantValanda, there is no id element with "header", how this will work? Oct 7, 2019 at 6:25
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.