[TUTORIAL] Sticky menu for default-bootstrap theme (tested with PS 1.6.0.11)

[muynck]

Hi developers,
 
I learn a lot from this forum because people share, so now I want to share a little script for those in need. For the default theme I have written a few lines of JavaScript (jQuery if you want) to make the menu sticky (only on wide screens). With it comes some CSS.
 
This code is tested with PrestaShop 1.6.0.11. If you have suggestions for other version, please comment.
 
JavaScript (jQuery)
Starting from line 38 in themes/default-bootstrap/js/modules/blocktopmenu/js/blocktopmenu.js add this:

$(document).on('ready',function(){
	if($(document).width()>767){
		$(document).on('ready scroll',function(){
			if($(document).scrollTop()>165) {
				$("#block_top_menu").addClass('sticked-container');
				$(".sf-menu").addClass('sticked-menu');
				$('.sf-search').show();
			}
			else {
				$("#block_top_menu").removeClass('sticked-container');
				$(".sf-menu").removeClass('sticked-menu');
				$('.sf-search').hide();
			}
		});
	}
});

I disabled it for smalls screens because I consider a sticky menu annoying on smalls screens.

CSS
At the end in themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css add this: 

.sticked-container {
	position: fixed;
	top: 0px;
	padding: 0px!important;
	left: 0px;
	background: #085DA5;
}
.sticked-menu {
	max-width: 1170px;
	margin:0 auto;
}

.sticked-menu.sf-menu > li > a {
	border-bottom:0px solid transparent;
	padding: 18px 9px;
}

You can play some with the padding, maybe it doesn't work with the changes you already made. Also, color the background to your preference.

[shaft]

Hello,

 

thank you for this tutorial. It WORKS very good! ;-) Prestashop v 1.6.0.14.

 

PS: Do you know, how to get a image "cart" in clickable link to "cart" in scroll down menu. Just like in a image bellow? :-)

[Juanan13]

Great, thanks a lot !!

 

Works in presta 1.6.1.17 too.