Hi everyone, I bought the Super Mega Menu extension https://www.opencart.com/index.php?rout ... on_id=8002
I had previously purchased an extension to make the default menu sticky, but now of course it does not work anymore.
I would like to make the new sticky mega menu, would anyone be kind enough to help me?
THX!!
I use version 3.0.2.0
The site is emoonx.com
I tried using only CSS style without any JavaScript, i did:
position: fixed;
top: 0;
width:100%
z-index: 999;
but in this way the menu is absolutely at the top, I would like it to be sticky but in the defaul position, going up only when the page is scrolled.
do you have a solution?
I tried using only CSS style without any JavaScript, i did:
position: fixed;
top: 0;
width:100%
z-index: 999;
but in this way the menu is absolutely at the top, I would like it to be sticky but in the defaul position, going up only when the page is scrolled.
do you have a solution?
First remove CSS you mentioned in previous post.
Edit:
Add to end of this file:
Edit:
Add to end of this file:
Then remove your browser cache and check it.
Edit:
Code: Select all
catalog/view/javascript/common.jsCode: Select all
$(function(){
var div = '#supermenu';
var windowScrollTop = $(window).scrollTop();
var divOffsetTop = $(div).offset().top;
if(windowScrollTop > divOffsetTop){
$(div).addClass('sticky');
} else {
$(div).removeClass('sticky');
}
$(window).on('scroll', function(){
var windowScrollTop = $(window).scrollTop();
if(windowScrollTop > divOffsetTop){
$(div).addClass('sticky');
} else {
$(div).removeClass('sticky');
}
});
});Code: Select all
catalog/view/theme/default/stylesheet/stylesheet.cssCode: Select all
#supermenu.sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 999999;
}It works perfectly, but the style css should be inserted in supermenu.css, putting it in stylesheet.css does not work
Thank you for your help mate!!!
Thank you for your help mate!!!
Sir Digicart, I followed your method above for '#menu' instead of '#supermenu' and it works!
But when I "inspect" it, there is an error:
Uncaught TypeError: Cannot read property 'top' of undefined
at stickIt (index.php?route=common/home:101)
when I clicked on the "index.php?route=common/home:101)" , it highlights an error at "orgelementtop = orgelementpos.top;"
On the website it looks great no problems. Just when "inspect", there is that error.
But when I "inspect" it, there is an error:
Uncaught TypeError: Cannot read property 'top' of undefined
at stickIt (index.php?route=common/home:101)
when I clicked on the "index.php?route=common/home:101)" , it highlights an error at "orgelementtop = orgelementpos.top;"
On the website it looks great no problems. Just when "inspect", there is that error.
Hey Digicart,
Thank you, this worked. I am using OC Version 3.0.3.2. Is there a way to disable this functionality on mobile devices?
Thank you, this worked. I am using OC Version 3.0.3.2. Is there a way to disable this functionality on mobile devices?
Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing
seanstorm100 wrote: ↑Fri Nov 29, 2019 12:48 pmHey Digicart,
Thank you, this worked. I am using OC Version 3.0.3.2. Is there a way to disable this functionality on mobile devices?
Hi, you are welcome.
a simple way is checking the window width in js, like this:
Code: Select all
if ($(window).width() > 768) {
// window width is bigger than 768 pixel
}Hi Digicert - Thank you. I actually got to like the Mobile Version. Opencart has a narrow look on Desktops, so I used this in the CSS to maintain that narrow look with the Sticky Nav:
left: 20.2%;
right: 20.2%;
top: 0;
The issue is, it's adopting this code on mobile but I would like the mobile nav to stay sticky but be unaffected by the size changes I have made (so it will be across the screen) See example of when it's at the top: https://pasteboard.co/IIXK6z6.png
But when I scroll it looks like this: https://pasteboard.co/IIXKDeT.png
I would like the size of the Categories to stay the same on mobile.
Please let me know if you have any idea of achieving this.
Thank you!
Regards,
Sean
left: 20.2%;
right: 20.2%;
top: 0;
The issue is, it's adopting this code on mobile but I would like the mobile nav to stay sticky but be unaffected by the size changes I have made (so it will be across the screen) See example of when it's at the top: https://pasteboard.co/IIXK6z6.png
But when I scroll it looks like this: https://pasteboard.co/IIXKDeT.png
I would like the size of the Categories to stay the same on mobile.
Please let me know if you have any idea of achieving this.
Thank you!
Regards,
Sean
Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing
Hi
You can use CSS media queries.
see this example:
You can use CSS media queries.
see this example:
Code: Select all
@media screen and (min-width: 768px) {
/* write css code for screens larger than 768 pixel here */
}
Thank you again Digicert. I will try this and get back to you. You have been very helpful!
Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing
Digicert, you are the best! Thank you very much. I have posted the complete code here for anyone who might be interested in having this done. I also used max-width: 768px instead of min-width.
Code
Go to:
*/catalog/view/theme/default/stylesheet/stylesheet.css (You can create your own stylesheet)
Add to the end of the file:
Code
Go to:
*/catalog/view/theme/default/stylesheet/stylesheet.css (You can create your own stylesheet)
Add to the end of the file:
Code: Select all
/* Sticky Nav */
#menu.sticky {
position: fixed;
text-align: center;
left: 20.2%;
right: 20.2%;
top: 0;
z-index: 999999;
box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.27);
}
@media screen and (max-width: 768px) {
#menu.sticky {
position: fixed;
left: 4%;
right: 4%;
top: 0;
z-index: 999999;
box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.27);
}
}
Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing
just to be complete as the answer Digitcart has given is correct
and thank you for taking the time to come back say thank you and help others.
you do not need (not ideal) to repeat anything that is not changing the initial (global) directive within the @media directive.
and thank you for taking the time to come back say thank you and help others.
you do not need (not ideal) to repeat anything that is not changing the initial (global) directive within the @media directive.
Code: Select all
/* Sticky Nav */
#menu.sticky {
position: fixed;
text-align: center;
left: 20.2%;
right: 20.2%;
top: 0;
z-index: 999999;
box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.27);
}
@media screen and (max-width: 768px) {
#menu.sticky {
left: 4%;
right: 4%;
}
}DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Hi Mona - Thank you, could you kindly explain? I am not big of a coder 
by mona wrote: ↑Sat Nov 30, 2019 2:51 amjust to be complete as the answer Digitcart has given is correct
and thank you for taking the time to come back say thank you and help others.
you do not need (not ideal) to repeat anything that is not changing the initial (global) directive within the @media directive.
Code: Select all
/* Sticky Nav */ #menu.sticky { position: fixed; text-align: center; left: 20.2%; right: 20.2%; top: 0; z-index: 999999; box-shadow: 0px 0px 7px 3px rgba(0,0,0,0.27); } @media screen and (max-width: 768px) { #menu.sticky { left: 4%; right: 4%; } }
Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing
css is cascading
which means that whatever comes next is the rule
so if you have
on line 20 but on line 120 you have
the browser takes 10px - as it comes later
THIS CHANGES if you add the !important rule which even if it is on line 20 if it is written and the line 120 stays the same, the browser takes 12px, because the !important rule overrides
@media is an specific directive
which means if the directive is within this, do not do what the general rule is .. do this specifically for this media type
so if you have
anything in a screen with 768px and 991px will be 120px;
the reason it is not ideal
you do not ideally want line 20 and line 120, because if you change line 20 you need to work out why it is not working and may end up adding the !important rule out of frustration, which gives a bigger problem - it is also a waste of valuable loading time.
the same logic applied to the @media directive
it is just messy and makes it harder and harder to change things.
which means that whatever comes next is the rule
so if you have
Code: Select all
a {
font-size: 12px;
}Code: Select all
a {
font-size: 10px;
}THIS CHANGES if you add the !important rule which even if it is on line 20 if it is written
Code: Select all
font-size: 12px !important;@media is an specific directive
which means if the directive is within this, do not do what the general rule is .. do this specifically for this media type
so if you have
Code: Select all
@media screen and (min-width 768px and max-with 991px) {
a {
font-size: 120px;
}
}the reason it is not ideal
you do not ideally want line 20 and line 120, because if you change line 20 you need to work out why it is not working and may end up adding the !important rule out of frustration, which gives a bigger problem - it is also a waste of valuable loading time.
the same logic applied to the @media directive
it is just messy and makes it harder and harder to change things.
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Hi Mona - Thank you for pointing this out. I will recheck my code and make the adjustments. 
by mona wrote: ↑Sun Dec 01, 2019 2:26 amcss is cascading
which means that whatever comes next is the rule
so if you haveon line 20 but on line 120 you haveCode: Select all
a { font-size: 12px; }the browser takes 10px - as it comes laterCode: Select all
a { font-size: 10px; }
THIS CHANGES if you add the !important rule which even if it is on line 20 if it is writtenand the line 120 stays the same, the browser takes 12px, because the !important rule overridesCode: Select all
font-size: 12px !important;
@media is an specific directive
which means if the directive is within this, do not do what the general rule is .. do this specifically for this media type
so if you haveanything in a screen with 768px and 991px will be 120px;Code: Select all
@media screen and (min-width 768px and max-with 991px) { a { font-size: 120px; } }
the reason it is not ideal
you do not ideally want line 20 and line 120, because if you change line 20 you need to work out why it is not working and may end up adding the !important rule out of frustration, which gives a bigger problem - it is also a waste of valuable loading time.
the same logic applied to the @media directive
it is just messy and makes it harder and harder to change things.
Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing
Who is online
Users browsing this forum: Bing [Bot], dparakhiya, Semrush [Bot] and 414 guests
