Jump to content

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

ALMAJ
 Share

Recommended Posts

ALMAJ Newbie

ALMAJ

Posted
Posted
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
Link to comment
Share on other sites
  • 4 weeks later...
ALMAJ Newbie

ALMAJ

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 1 month later...
sooroos Newbie

sooroos

Posted
Posted (edited)

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
Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
  • Author
Posted (edited)

 

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.com, onlywebpro.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
Link to comment
Share on other sites
  • 5 weeks later...
lamcle Newbie

lamcle

Posted
Posted

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.

Link to comment
Share on other sites
lamcle Newbie

lamcle

Posted
Posted

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.

Link to comment
Share on other sites
  • 2 weeks later...
  • 4 months later...
ALMAJ Newbie

ALMAJ

Posted
  • Author
Posted

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

Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
  • Author
Posted

 

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

Link to comment
Share on other sites
Goyo Newbie

Goyo

Posted
Posted

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.
Link to comment
Share on other sites
Danieldrennan Newbie

Danieldrennan

Posted
Posted

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

Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
  • Author
Posted

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

Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Danieldrennan Newbie

Danieldrennan

Posted
Posted

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.

Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
  • Author
Posted

"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'});
					
				}
			}
			
	});
Link to comment
Share on other sites
ALMAJ Newbie

ALMAJ

Posted
  • Author
Posted

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
Link to comment
Share on other sites
  • 3 months later...
stoo_s Newbie

stoo_s

Posted
Posted

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.

Link to comment
Share on other sites
  • 3 months later...
  • 5 months later...
YasinTürk Newbie

YasinTürk

Posted
Posted

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

Link to comment
Share on other sites
  • 2 months later...
  • 4 weeks later...
emerinoc Newbie

emerinoc

Posted
Posted

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
Link to comment
Share on other sites
  • 2 months later...
vanyeuan Newbie

vanyeuan

Posted
Posted

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}
Link to comment
Share on other sites
امیر Newbie

امیر

Posted
Posted

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

Link to comment
Share on other sites
  • 5 months later...
Goyo Newbie

Goyo

Posted
Posted

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.
Link to comment
Share on other sites
  • 5 months later...
  • 8 months later...
Dmytro Korolkov Newbie

Dmytro Korolkov

Posted
Posted
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">

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...