Jquery Conflict on mobile

[nicksab]

Hello everyone,

the site is at http://royal-fleur.com

I need some serious help with jquery conflict.

I am using a jquery calendar as attribute for a delivery date.

The site works as it should when on a desktop.

However, when access from a mobile device, the top left corner menu is not working anymore. When clicked, it goes to the bottom of the page displaying all the links.

Here is a link to product with the attributes.

https://www.royal-fleur.com/valentin...-roses-bouquet

Please help in fixing the mobile menu issue.

Thank you

[raptar]

The dater picker script you have added also loads an older version of jquery 1.4 causing a conflict.
The date picker script you selected will not work with jquery 3.4.
Removing all traces of the date picker scripts will restore your site to normal.
Find a date picker script that works with jquery 3.4 and then test test test
btw your mega menu has broken the page layout on desktop

[nicksab]

The dater picker script you have added also loads an older version of jquery 1.4 causing a conflict.
The date picker script you selected will not work with jquery 3.4.
Removing all traces of the date picker scripts will restore your site to normal.
Find a date picker script that works with jquery 3.4 and then test test test
btw your mega menu has broken the page layout on desktop

Thank you.

I will try and look for a more up to date version of datepicker.

I am completely new to this. What s the best way to test? firefox debug console?

Also, what do you mean by mega menu broke desktop layout?

It appears fine on my ends ( IE, Chrome and Firefox) but maybe I am missing something here.

Thank you

[raptar]

Debug is very helpful. So is the forum if you supply enough details for people to work with.
You must be using a really big screen because when I look at your menu (on a smaller screen) some links are pushed onto the next line and they are not displaying correctly. This is causing the menu to overflow and push the sidebar around.

[Design75]

I like to use this one : daterangepicker.
It is easy to customize,

[nicksab]

Debug is very helpful. So is the forum if you supply enough details for people to work with.
You must be using a really big screen because when I look at your menu (on a smaller screen) some links are pushed onto the next line and they are not displaying correctly. This is causing the menu to overflow and push the sidebar around.

I see what you mean now. I do have a big screen and such never noticed the "push over" thing. After zooming my page, the whole page layout gets broken.

How can I fix that?

Thanks

[nicksab]

I like to use this one : daterangepicker.
It is easy to customize,

Thanks. I will check it out. So far, as per raptar advice, I updated the datepicker and seems to be ok so far. The mobile menu is working again.

[raptar]

I Would add to #mega-wrapper .mega-menu display:inline-block to make the menu a block and change the height from 30px to auto to fill that block.

#mega-wrapper .mega-menu{display:inline-block;height:auto;}

I noticed that you still have multiple jquerys running... That date picker code has one and I noticed you have added a jquery1.7 to that list. Your site starts with jquery 3.4, the other jquerys are going to fight that.

[davewest]

I will try and look for a more up to date version of datepicker.

jQuery UI has a datepicker widget within it that I use on both front and back end.. has many other input widgets too, more info here.

[Design75]

jQuery UI has a datepicker widget within it that I use on both front and back end.. has many other input widgets too, more info here.

Which btw is also the new standard for Zen Cart backend