special menu and modules for mobile

Hello,
You already explained me that some modules could only be displayed on mobile if they have a css rule "onlymobile" and "nomobile" for the other ones and it works!
But I would like two more options
1-not to display in the mobile the Image Show GK4 module but in the module admin I can't find how to give the css rule nomobile.
2- i would like to use a different menu for the mobile; i created it but what is the way to display only this menu and not the menu choosen in the template configuration. (I created a new template and assigned the new menu items) but the main menu is still displayed with a burger icon and the new menu is displayed in a list.
Can you help me please?
Thks in advance.
Pascal

Hi

1. Not all modules has an option for a module class suffix enabled to avoid overwriting layout styles. For that task just add this to override.css:

Code: Select all

@media only screen and (max-width:767px) {
div.gk-intro {
    display: none;
}
}


2. Template is responsive, which means that the content You can see on desktop is processed to be also available on mobile. This is what template does with the menu. To change that You will have to add a menu module with "onlymobile" and use a CSS to remove standard menu:

Code: Select all

@media only screen and (max-width:1030px) {
#gkMobileMenu {
    display: none;
}
}


Hello,
for the point 2, shall I insert in override.css as well?
thks

Hi

Yes, any css addons/modifications should be in override.css. This will make it easier for You to keep just one file backed up in case of template update.

Hello again,
this is what I have done. but the slider and the menus are still displaedy in the mobile!
what can i do?
thks for your help

Hi

Tell me the url to Your site and send me an access to joomla panel. I'll add the code myself.

hello, the url is http://www.lespetitschanteursdesaintlou ... nistrator/
[edited by moderator]
so the purpose is to put another slider in the home page with a css rule onlymobile and to use another menu for mobile instead of the template menu as the links cannot work in . If you have a better idea don't hesitate.
Thks in advance.

Hi

You forgot to enable using Override in template's configuration. I've switched it to ON and code is working now.

thks a lot.
still a little problem because the gk mobile menu is not displayed on tablets!
can i use this rule you recommanded
@media only screen and (max-width:767px) {#gkMobileMenu { display: none;}}
instead of
@media only screen and (max-width:1030px) {#gkMobileMenu { display: none;}}
and putting of course #gkMobileMenu instead of div.gk-intro

thks for your reply

Hi

Mobile menu is hidden since that's the style we have added to css. You said You want to use a different mobile menu, some 3rd party module, but I do not see it anywhere.

Have You created a new module position to add this new module?

Here is an example how to add one: https://www.gavick.com/documentation/jo ... her-module

Hello,
we use a different mobile menu 3rd party module in the mobile and it is correcly displayed in a mobile phone but it is not not dispayed on a tablet. and i don't see eather in the tablet the menu (the one of the template) which can be seen in the laptop. yhis is wgat i don't understand.

Hi

Your 3rd party mobile menu works only for screens smaller than 580px, so You need to tweak it a little to work since 1030px so tablets in landscape will be included as well. That's the screen width our mobile solution was working with and You've asked me to disable it.