Jump to content

[TUTORIAL] (FIXED TOP MENU) How to make the top horizontal menu float (prestashop 1.5.6.x)


Recommended Posts

In this tutorial I will show you how to make the top horizontal menu float (fixed horizontal top menu)
for prestashop 1.5.6.x
 
 
So let's do it!
 
1- go to "/modules/blocktopmenu/js" and open this file "superfish-modified.js"
 
2- with an html editor or a notepad open the file and search for this code:
})(jQuery);
jQuery(function(){
	jQuery('ul.sf-menu').superfish();
});
and change it with this code here:
})(jQuery);
jQuery(function(){
	jQuery('ul.sf-menu').superfish();
	var sticky = $('.sf-menu').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px', width: '1028px', margin: '0px 0px 0px' });
} else {
$('.sf-menu').css({position: 'static', top: '0px', width: '100%', margin: '10px 0px 0px' });
}
}); 
});

3 - Depending on your theme, you maybe need to edit the widths and margins of this code,

change it according to your theme.

 

The result is a nice floating Horizontal top menu bar ;)

 

that's all.

 

 

I hope you find it useful!

 

  • Like 3

Share this post


Link to post
Share on other sites
  • 4 weeks later...

Can you please help, to do the same in Prestashop 1.6

 

It must be a similar process.

I'm upgrading one of my stores to PS 1.6, as soon as I finish I will post here a tutorial on how to make the top horizontal menu float for PS 1.6

Share this post


Link to post
Share on other sites
  • 1 month later...

i found this tutorial while searching for P.S 1.6

Shame that the author copied the solution from here ( link ) and didn't give the credits :) and moreover couldn't write it for 1.6

 

Anyways, i will post MY solution for 1.6 (Hope that i wrote the correct values)

		var sticky = $('.sf-menu').offset().top;
		$(window).scroll(function(){
		
			if ($(window).width() > 1182){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 974 && $(window).width() < 1183 ){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 750 && $(window).width() < 975){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			
	}); 
	
Edited by sooroos (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

 

i found this tutorial while searching for P.S 1.6

Shame that the author copied the solution from here ( link ) and didn't give the credits :) and moreover couldn't write it for 1.6

 

Anyways, i will post MY solution for 1.6 (Hope that i wrote the correct values)

		var sticky = $('.sf-menu').offset().top;
		$(window).scroll(function(){
		
			if ($(window).width() > 1182){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 974 && $(window).width() < 1183 ){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 750 && $(window).width() < 975){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			
	}); 
	

Who I must give credits? csstricks.comonlywebpro.com or you?

because believe it or not I just follow the same instructions as you probably did in the same source,

and guess what, you are not the only person in the world that can figure it out how to make a fixed top horizontal menu float, the code maybe similar but you did not invented,

if you want credits so bad, make a patent first, then you can have credits.

And instead of hunting and asking for credits, share information and make useful tutorials,

and the credits will come to you, stop asking for it, it's not the way it works.

 

 

 

Edited by ALMAJ (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites
  • 5 weeks later...

Hi ALMAJ, i have tried your method, and i works fine with my prestashop default theme.

BUT there are some problems :

1. the topmenu does not work fine with the telephone version. can we disable is with telephone.

2. i tried to turn back the topmenu as original(do not float), but I failed. I entered "\modules\blocktopmenu\js", opened "superfish-modified.js", i found this file is like the original one which has 124 lines (i am sure that i changed it before). and i even copied another original WHOLE file of topmenu to my system, i does NOT change either. why? and what i should do?

 

Thanks.

Share this post


Link to post
Share on other sites

Hi Majority, for my second problem, i found the reason, it because i entered the wrong folder. ("\themes\default-bootstrap\js\modules\blocktopmenu\js" vs "\modules\blocktopmenu\js")

So the only the problem is with mobile phone explorer. hope you can give a suggestion.

Thanks.

Share this post


Link to post
Share on other sites
  • 2 weeks later...
  • 4 months later...

Hi Majority, for my second problem, i found the reason, it because i entered the wrong folder. ("\themes\default-bootstrap\js\modules\blocktopmenu\js" vs "\modules\blocktopmenu\js")

So the only the problem is with mobile phone explorer. hope you can give a suggestion.

Thanks.

 

Hi, If I understand correctly, you have problems with floating top menu when view your site in a mobile device?

what is your prestashop version, you have a default theme or custom theme?

 

regards

Share this post


Link to post
Share on other sites

 

Hi Majority,

 

is possible to use your code (post #1) with 1.6.0.9 version?
 
Thanks in advance.

 

 

No, it needs changes to the code and also the files have different names, I did not yet tried on PS 1.6.x.x

please see sooroos solution, I will post if I find a solution.

 

Regards

Share this post


Link to post
Share on other sites

No, it needs changes to the code and also the files have different names, I did not yet tried on PS 1.6.x.x

please see sooroos solution, I will post if I find a solution.

 

Regards

 

Thanks Majority for your fast reply.

I will wait your solution if you find it.
Regards.

Share this post


Link to post
Share on other sites

 

Thanks Majority for your fast reply.

I will wait your solution if you find it.
Regards.

 

Hello 

I also use prestashop 1.6.0.9 and I need to make the top horizontal menu sticky. I tried the solution but it didn't work

 

thank you

Edited by mspace (see edit history)

Share this post


Link to post
Share on other sites

Hi, Many thanks for the info,

 

I managed to change the global.css file to enable my topmenubar, search, and logo etc. to remain sticky as i scroll,

 

However, i am now left with partial content on every page on my site missing as if the sticky section is now "layered on top" of the rest of my content.

 

My URL is www.jditmedia.com (please excuse the site as i am in early development stages of the CRM)

 

Any help or suggestions would be greatly appreciated to solve this

 

Kind regards

 

Daniel

Share this post


Link to post
Share on other sites

Hi, Many thanks for the info,

 

I managed to change the global.css file to enable my topmenubar, search, and logo etc. to remain sticky as i scroll,

 

However, i am now left with partial content on every page on my site missing as if the sticky section is now "layered on top" of the rest of my content.

 

My URL is www.jditmedia.com (please excuse the site as i am in early development stages of the CRM)

 

Any help or suggestions would be greatly appreciated to solve this

 

Kind regards

 

Daniel

 

 

try this:

open: Themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

now on the line 13 change it to  position: fixed

 

after that clean all your cache

 

Regards

Share this post


Link to post
Share on other sites

It seems the position of the header is fixed, try to change it to "relative"
 

did you have tried sooroos solution?

try this:

var sticky = $('.sf-menu').offset().top;
		$(window).scroll(function(){
		
			if ($(window).width() > 1182){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 974 && $(window).width() < 1183 ){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 750 && $(window).width() < 975){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			
	}); 
	

sorry but this tutorial was made for prestashop 1.5.6.x and not for 1.6.x.x

and I do not yet have prestashop 1.6.x.x because it's unstable

Share this post


Link to post
Share on other sites

Hi, I intended for the header to be fixed, and for the rest of the content to be listed beneath,

 

instead the header appears to be "layered" on top of the content below/behind,

 

the solution i am looking for would move the content down the page to begin where the fixed header ends.

 

surely the file i would change would be bootstrap.css or global.css?

 

forgive me if i am mistaken, any help is greatly appreciated.

Share this post


Link to post
Share on other sites

"fixed" means that it stays fixed to the screen page when you scroll the page the "fixed" content stays always on the screen.

 

you must change the file: "/modules/blocktopmenu/js/superfish-modified.js"

 

and paste this code: 

var sticky = $('.sf-menu').offset().top;
		$(window).scroll(function(){
		
			if ($(window).width() > 1182){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 974 && $(window).width() < 1183 ){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 750 && $(window).width() < 975){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			
	}); 

Share this post


Link to post
Share on other sites

just find this code:

})(jQuery);
jQuery(function(){
	jQuery('ul.sf-menu').superfish();
});

and replace by this code:

 

})(jQuery);
jQuery(function(){
    jQuery('ul.sf-menu').superfish();
var sticky = $('.sf-menu').offset().top;
		$(window).scroll(function(){
		
			if ($(window).width() > 1182){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 974 && $(window).width() < 1183 ){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 750 && $(window).width() < 975){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			
	}); 

to reset the global.css to the original values you should have made a backup of the original file

Always make a backup first!

 

Regards

  • Like 1

Share this post


Link to post
Share on other sites
  • 3 months later...

Firstly, I'd like to say a massive thanks for this code. I'm using it with Prestashop 1.6 , have adapted it to fit my page and it really looks fantastic. My one problem though, is how it appears on a mobile site. The fixed menu is completely static on the mobile site, there's no way of scrolling it up and down and when you try to, the site can be seen moving up and down behind the categories menu. Is there anything that could be added to the code to revert to a standard menu on the mobile site only? I've tried a couple of things but it just ends up disabling the fixed menu on everything. Any help would be appreciated.

Share this post


Link to post
Share on other sites
  • 3 months later...
  • 5 months later...

just find this code:

})(jQuery);
jQuery(function(){
	jQuery('ul.sf-menu').superfish();
});

and replace by this code:

 

 

})(jQuery);
jQuery(function(){
    jQuery('ul.sf-menu').superfish();
var sticky = $('.sf-menu').offset().top;
		$(window).scroll(function(){
		
			if ($(window).width() > 1182){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 974 && $(window).width() < 1183 ){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 750 && $(window).width() < 975){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			
	}); 

to reset the global.css to the original values you should have made a backup of the original file

Always make a backup first!

 

Regards

bot Working versiyon 1.6.0.6

Share this post


Link to post
Share on other sites
  • 2 months later...
  • 4 weeks later...

What about 1.6.1.4?

Thanks

I answere myself

 

Use this code on the bottom of global.js

$(document).ready(function(){
    var sticky;
    setTimeout(function(){
        sticky = $('#block_top_menu').offset().top;
        $(window).scroll(function(){
            if( $(window).scrollTop() > sticky )
                $('#block_top_menu').css({position: 'fixed', top: '0', left: '0', padding: '0', width:'100%'});
            else
                $('#block_top_menu').css({position: '', top: '', left: '', padding: '', width:''});
        });
    }, 100);
});

I take from: http://blog.prestagear.com/top-horizontal-sticky-menu/

  • Like 2

Share this post


Link to post
Share on other sites
  • 2 months later...

Hi i want to share how i solved that for ps 1.6.1.3

I paste the following code in /themes/default-bootstrap/header.tpl

 

you can check the menu in my web http://tiendareveal.com

 

{literal}
        <script type="text/javascript"> 
var sticky = $('.sf-menu').offset().top;
$(window).scroll(function(){
 
if ($(window).width() > 1182){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
if ($(window).width() > 974 && $(window).width() < 1183 ){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
if ($(window).width() > 750 && $(window).width() < 975){
if( $(window).scrollTop() > sticky ) {
$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
} else {
$('.sf-menu').css({position: 'relative'});
 
}
}
 
}); 
</script>
    {/literal}

Share this post


Link to post
Share on other sites

just find this code:

})(jQuery);
jQuery(function(){
	jQuery('ul.sf-menu').superfish();
});

and replace by this code:

 

 

})(jQuery);
jQuery(function(){
    jQuery('ul.sf-menu').superfish();
var sticky = $('.sf-menu').offset().top;
		$(window).scroll(function(){
		
			if ($(window).width() > 1182){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 974 && $(window).width() < 1183 ){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 750 && $(window).width() < 975){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			
	}); 

to reset the global.css to the original values you should have made a backup of the original file

Always make a backup first!

 

Regards

 

just find this code:

})(jQuery);
jQuery(function(){
	jQuery('ul.sf-menu').superfish();
});

and replace by this code:

 

 

})(jQuery);
jQuery(function(){
    jQuery('ul.sf-menu').superfish();
var sticky = $('.sf-menu').offset().top;
		$(window).scroll(function(){
		
			if ($(window).width() > 1182){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'1170px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 974 && $(window).width() < 1183 ){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'940px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			if ($(window).width() > 750 && $(window).width() < 975){
				if( $(window).scrollTop() > sticky ) {
					$('.sf-menu').css({position: 'fixed', top: '0px','max-width':'720px'});
				} else {
					$('.sf-menu').css({position: 'relative'});
					
				}
			}
			
	}); 

to reset the global.css to the original values you should have made a backup of the original file

Always make a backup first!

 

Regards

hi tnx for code

i change my code js top menu

but

horizontal menu float

no working by scoroll

plz view : www.puzel.ir

Share this post


Link to post
Share on other sites
  • 5 months later...

I have a problem that the sticky menu is not on the same position (center) as regular. when i scroll, the sticky menu is displaced as can seen on the attached image. please can any tell me where i can change that. Thanks!

 

post-263482-0-34301300-1479822163_thumb.jpg

Share this post


Link to post
Share on other sites

I have a problem that the sticky menu is not on the same position (center) as regular. when i scroll, the sticky menu is displaced as can seen on the attached image. please can any tell me where i can change that. Thanks!

 

 
Hi JrDeline,
 
could you share your shop url?
 
I can suppose if you modify the css file will be ok.
 
Regards.

Share this post


Link to post
Share on other sites
  • 5 months later...
  • 8 months later...
On 12.05.2017 at 7:07 PM, Nunzio Persichillo said:

How can I add a logo in the left of fixed top menu?

 

The same question.  Think need to edit blocktopmenu.js  part:
 


$(document).ready(function(){
	var stickMenu = true;
	var docWidth= $('body').find('.container').width();
	if(stickMenu && docWidth > 780) {
		$('body').find('#block_top_menu').wrapInner('<div class="stickUpTop"><div class="stickUpHolder container">');
		$('.stickUpTop').tmStickUp();
	}
	
	if(isiPad){categoryReload();} // hak for ipad
})


because my fixed top menu block  is <div class="stickUpHolder container">

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More