Post by depechemode75 » Thu Mar 29, 2018 4:21 pm

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

New member

Posts

Joined
Sun Dec 31, 2017 12:09 am

Post by DigitCart » Thu Mar 29, 2018 8:40 pm

Hi,
Is your site online?
Can you add a URL to your site in your post?

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by depechemode75 » Thu Mar 29, 2018 9:09 pm

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?

New member

Posts

Joined
Sun Dec 31, 2017 12:09 am

Post by DigitCart » Thu Mar 29, 2018 9:34 pm

First remove CSS you mentioned in previous post.
Edit:

Code: Select all

catalog/view/javascript/common.js
Add to end of this file:

Code: 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');
		}
	});
});
Edit:

Code: Select all

catalog/view/theme/default/stylesheet/stylesheet.css
Add to end of this file:

Code: Select all

#supermenu.sticky {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999999;
}
Then remove your browser cache and check it.

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by depechemode75 » Thu Mar 29, 2018 10:07 pm

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!!!

New member

Posts

Joined
Sun Dec 31, 2017 12:09 am

Post by DigitCart » Thu Mar 29, 2018 10:10 pm

You're welcome.

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by henfeb » Sun Apr 14, 2019 10:24 am

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.

Newbie

Posts

Joined
Thu Apr 04, 2019 7:30 am

Post by DigitCart » Sun Apr 14, 2019 4:37 pm

Hi
Can you please share a link to your store?

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by henfeb » Fri Apr 26, 2019 10:26 am

Dear sir sorry for the late reply, I just uploaded my site from local to live. This is the address phebesstore.co.id

Newbie

Posts

Joined
Thu Apr 04, 2019 7:30 am

Post by nightwing » Fri Nov 29, 2019 12:48 pm

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?

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by DigitCart » Fri Nov 29, 2019 6:31 pm

seanstorm100 wrote:
Fri Nov 29, 2019 12:48 pm
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?

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
}

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by nightwing » Sat Nov 30, 2019 1:54 am

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

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by DigitCart » Sat Nov 30, 2019 2:00 am

Hi
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 */
}

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by nightwing » Sat Nov 30, 2019 2:02 am

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


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by nightwing » Sat Nov 30, 2019 2:19 am

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: 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


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by DigitCart » Sat Nov 30, 2019 2:31 am

You are welcome.

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by by mona » Sat Nov 30, 2019 2:51 am

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.

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.


Spinning Social : Links : Menus : Payments : Socials : Ads : Screen Backgrounds : Galleries : Headers : Banners : Promos


Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by nightwing » Sun Dec 01, 2019 2:14 am

Hi Mona - Thank you, could you kindly explain? I am not big of a coder :D
by mona wrote:
Sat Nov 30, 2019 2:51 am
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.

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


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm


Post by by mona » Sun Dec 01, 2019 2:26 am

css is cascading
which means that whatever comes next is the rule
so if you have

Code: Select all

a {
font-size: 12px;
}
on line 20 but on line 120 you have

Code: Select all

a {
font-size: 10px;
}
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

Code: Select all

font-size: 12px !important;
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

Code: Select all

@media screen and (min-width 768px and max-with 991px) {
a {
font-size: 120px;
}
}
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.

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.


Spinning Social : Links : Menus : Payments : Socials : Ads : Screen Backgrounds : Galleries : Headers : Banners : Promos


Active Member

Posts

Joined
Mon Jun 10, 2019 9:31 am

Post by nightwing » Sun Dec 01, 2019 12:21 pm

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 am
css is cascading
which means that whatever comes next is the rule
so if you have

Code: Select all

a {
font-size: 12px;
}
on line 20 but on line 120 you have

Code: Select all

a {
font-size: 10px;
}
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

Code: Select all

font-size: 12px !important;
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

Code: Select all

@media screen and (min-width 768px and max-with 991px) {
a {
font-size: 120px;
}
}
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.

Regards,
Nightwing
Access to my Free Extensions: https://www.opencart.com/index.php?rout ... =nightwing


Active Member

Posts

Joined
Tue Nov 05, 2019 11:08 pm

Who is online

Users browsing this forum: No registered users and 28 guests