Shorter menu when watching site on mobile

H,

Is it possible to show a shorter menu with less items when watching the site on a mobile phone?

Kind regards,
GertJan

Hi

Yes You can select a different menu for mobile in template configuration.

Hi

Yes You can select a different menu for mobile in template configuration.

Can you tell me exactly where?
I can't seem to find it.... there's a menu-tab but there I can only select one menu (main menu) but I see no option to select something different for mobile devices.

Hi

Yes You're right. Such option was available with non-responsive templates. I've just looked in wrong template while writing an answer. In this case You can still disable some links with using GK Menu Extra plugin and it's functinality to add class suffixes for menu elements. Than simply add a suffix called "nomobile" to the elements You would like to hide.

Hi

Yes You're right. Such option was available with non-responsive templates. I've just looked in wrong template while writing an answer. In this case You can still disable some links with using GK Menu Extra plugin and it's functinality to add class suffixes for menu elements. Than simply add a suffix called "nomobile" to the elements You would like to hide.

Hi,

Thanks for the reply. I will try this and let you know if this is the solution for me but I think it will be

Kind regards, GertJan

I tried it directly but it does not work.

If I put nomobile in the menu item the item also dissapears from my normal website.
Did I enter it correctly? See screenshot below.

Hi

Yes it's correct. Please show me Your site now so I'll see what is wrong.

Also please add this code to override.css and remember to allow using this file in template settings:

Code: Select all

/* tablet/mobile suffixes */
.notablet {
    display: block;
}
.nomobile {
    display: block;
}
.onlytablet {
    display: block;
}
.onlymobile {
    display: block;
}

@media only screen and (min-width:720px) and (max-width: 985px) {
.onlytablet {
    display: block;
}

.notablet {
    display: none;
}
}

@media only screen and (max-width:719px) {
.nomobile {
    display: none;
}

.onlymobile {
    display: block;
}
}


Added the code to override.css

But still no change > http://178.18.89.213/~madonna/

If you go to Madonna, Biografie..
On the site you see 2012 as the first item.
I have added ' nomobile' to this item but I still see it on my iphone.

Hi

Acctualy this element is removed, but in a different menu system In one which got disabled and replaced with a dropdown which is not supporting suffixes.

There is a long shot to check but maybe it will work:

Code: Select all

otpion[value="/~madonna/index.php/madonna/biografie/2012/"] {
display: none;
}


please try it. If this will not work than I can modifie the menu to accept class suffixes in this view.

Hi again!

Where do I put the last piece of code?

Hi

This still should go into the override.css but I've made a typo, should be "option" instead of "otpion". Sorry.

Hi

This still should go into the override.css but I've made a typo, should be "option" instead of "otpion". Sorry.

it's still not working....

Hi

It was just a guess anyway. Got another idea. Try this code:

Code: Select all

#gkMobileMenu select option:nth-child(10) {
display: none;
}


Hi

It was just a guess anyway. Got another idea. Try this code:

Code: Select all

#gkMobileMenu select option:nth-child(10) {
display: none;
}


Hi!

Thanks for the efforts... this code is also not working.

Hi

Are You sure it's not working ? Biography option is not there anymore