Responsive menu does not work for mobile devices

Dear support team,

I have installed JUX CSS3 Mega Menu extension and I'm getting problems when using responsive menu feature. Trying to identify the problem I have created a new template from scratch having only a menu (there is no additional CSS in it). In the backend I have configured the menu activating "Responsive menu = Yes" and "Mobile Tablet = Dropdown", in Module tab, and "Enable bootstrap = Yes" in Advance tab.

When I resize the navigator window in a PC everything is shown properly however when I render the same page using an iPad or an Android smartphone the menu shown is not responsive and I get the menu with all entries like in a PC web navigator but in a very small size. I have attached an image of the Android mobile screen and the resized PC navigator screen.

The site URL is: s564145157.mialojamiento.es/desarrollo/estudios.html (In a private message I'll send login and pwd)

Is there something missing or wrong in the configuration?

Thanks and regards.

Dear support team,

I kindly ask you support for this topic because it is a blocking point for the responsive development of our new website and I have not get any answer so far.

Thanks in advance
Regards,

Hi Paula
Sorry for the late reply.
Please post the correct forum so that we can know and serve you the best.
URL: s564145157.mialojamiento.es/desarrollo/estudios.html not receive responsive. because at this site does not have the frame of the template. Should it not receive necessary css and responsive.
URL: s564145157.mialojamiento.es/desarrollo/ On mobile devices. drop menu after video loss, I've solved it.
I write a custom config css in CSS
@media screen and (max-width: 768px){

.redblack #js-mainnavcss3.megamenu .js-megamenu{
position: relative;
z-index: 9999999999999;
}
#menuprincipal, #contenedorgeneral{
width:100%!important;
}
}

Hi DiepNT,

Thanks for your replay.

I think I don't understand your explanation. My message was related only to this URL: s564145157.mialojamiento.es/desarrollo/estudios.html

Why am I get the right menu behaviour when I resize the PC screen but it doesn't either on my Android mobile nor an iPad? I guess that if something is missing it should not work on any device like PC and mobiles, right? This is why I'm confused with your explanation.

Can you explain again the solution or the reason why I'm getting the issue?

Thanks and regards.

Hi
I found that it generated URL. When setting up our modules, it's not structured template Joomla (you may know, is that you set up a site my module white, not a joomla site). You press f12 you can discover it. You can set up and check other modules. I think it also has a similar problem. Merry Christmas

Hi,

Happy new year. We have a Christmas break and this is why I didn't answer your message before.

Back at work, I have imported a joomla responsive design template and included the top menu, which is working properly with a maximize navigator window. When I resize the navigator frame or render the web page on a mobile device (smartphone or tablet) the menu is also resize showing 3 lines at the left corner.

However, when I click on it, every main option is shown but I can't go deeper. For instance, I get main option "ESTUDIOS" but clicking on the arrow at the right to go deeper, nothing happens (I have also attached an image).

URL: s564145157.mialojamiento.es/desarrollo/pruebo-bootstrap.html

I don't know what is the problem with the menu. Can you help me?

Thanks and regards.

Hi Paula,
Happy new year
About you problem. is conflict bootstrap.js. on your site are load 2 files bootstrap.js
Please remove a bootstrap.js file.
Hope help you!
Thanks.

Hi,

I have been looking for the 2 bootstrap.js files you mentioned. In this template I have found the following files: bootstrap.js and bootstrap.min.js, but the template only loads bootstrap.min.js. So I haven't seen the conflict you meant, nevertheless I have renamed the file bootstrap.js but the problem still happens.

Did you mean the two files I mentioned now or any other one?

Thanks and regards

HI Paula,
I do not see your changes. I see it still exists. and I do not understand why you are loading is the library(jquery.js và bootstrap.min.js) at the end of the site.

Hi,

You are right! It was a double bootstrap.js call. I have removed one of them and it works properly.

Thanks for your support.
Regards.