1. Helix-II
  2. Monday, 16 December 2013
I have added a custom class to the Helix Mega Menu options but it does not seem to be working. Using the code below works, but only for the desktop view.

li.menu-item.classname {display: none; visibility: hidden}

Thanks for your help with this issue.
Responses (7)
Hi, Please see the bootstrap responsive class http://getbootstrap.com/2.3.2/scaffolding.html#responsive

To hide menu items in phone view then you need to add class for specific menu items "hidden-phone"

To hide menu items in tablen view then you need to add class for specific menu items "hidden-tablet"

Thanks
  1. more than a month ago
  2. Helix-II
  3. # 1
I have a iFrame Menu Item (Wrapper) using the Optima Template.

I am trying to hide the Menu Item when the template is displaying in "Phone".

I have added "hidden-phone" using the Menu Manager, Page Display, "Page Class" and that did not work.

I also tried adding "hidden-phone" using the Menu Manager, Mega Menu Options "Add Custom Class"

Any ideas on what I can do to stop this menu from displaying while someone is using on a mobile phone.

Thanks...

Scott
  1. more than a month ago
  2. Helix-II
  3. # 2
Ok, so we have few options:

1) Remove all "hidden-phone" , and use only in one place in Menu Manager in selected menu items in Helix Mega Menu Options -> Add Custom Class,
then in custom.css add:
@media only screen and (max-width: 480px) {
.hidden-phone {display: none !important;}
}

Tip: http://www.joomshaper.com/documentation/helix/adding-custom-css-and-javascript-files

It means when mobile user will check this page probably he will not see those submenu items.

2) or in template layout add new header and clone all position from it also menu but set to show only on mobile
and old one to show on desktop
  1. more than a month ago
  2. Helix-II
  3. # 3
Hi i have a own custom class in Mega Menu Helix Option. This class works on desktop, how can i add the same class in the same menu item for mobile?
  1. more than a month ago
  2. Helix-II
  3. # 4
If you're using Helix3 template or based on this framework, you can use different menu for mobile view only. You do not have to use MainMenu.
Second, Helix3 is based on Boostramp3 - it means that you can use class'es from it

.visible-xs
or
.hidden-xs

---
of course without dot !
---
xs - means Screen less than 768px
  1. more than a month ago
  2. Helix-II
  3. # 5
Hallo Frankowski,

thanks for your reply. I have Helix 2 and my own class in the Helix Menu Option. For example the class .login (without dot) - i need this class to login the users automatic in a typo3-system. This works fine in the desktop view with the Helix Menu option, but it's not work for mobile (see atttachment).
Attachments (2)
  1. more than a month ago
  2. Helix-II
  3. # 6
I added the class "hidden-xs" to the Link CSS Style field in the menu item (in the Link Type tab) and it worked, hid the item in the off canvas menu but kept the URL the same as for desktop.
  1. more than a month ago
  2. Helix-II
  3. # 7


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.