I have a "In this Section:" module in 'Sidebar-2' that I only want to display on the desktop. It has other classes and I added '.visible-desktop' at the end. However, the module still shows on the small screens (phone or tablet).

The original module class suffix was"
icon medium top icon-folder-open

and now it is:
icon medium top icon-folder-open .visible-desktop

I tried:
.visible-desktop icon medium top icon-folder-open

or even without the others:
.visible-desktop

but it makes not difference.

e.g. www.dalinyebo.com/biobased

Can see where I have gone wrong?

Regards,
Philipp

Hi Phillip,

try removing the dot/full stop from .visible-desktop

Cheers
Paul

You too!


Perhaps add more usage example (they are helpful)

Thank you for the quick response,
Philipp

PS: Of course if worked.

Hi Phillip,

Yes was thinking about that one already

Not sure we can win on this one

As the css coding if you wanted to add it - would require the dot/fullstop for the css to work

I'll pass it along for anthony to think about

Cheers
Paul

Hi Paul,

I think just add a comment for the css coders in the documentation, as I think the documentation is more written for the users of the template who adds code in the modules directly.

Hit a snag: The first module (see above) worked find. Now, I tried to also apply it to the menu module, so I can use two different menus for the small screens and for the desktop.
Menu Desktop: visible-desktop hidden-tablet hidden-phone
Menu phone/table: hidden-desktop visible-tablet visible-phone

In the main menu I now see double .. it repeats the correct menu and in the dropout panel, it shows the two different menus. - I added IDs , but that did not change anything.

In firebug , these module suffixes are not showning-up. It somehow does not carry the suffix in the menu-module (I'm using the joomla menu, not the Megamenu).

How would I have to add the hidden/visible to the customs.css to make menu with ID1 to display in the main menu module and menu ID2 in the module panel?

The reason for doing that: I recently changed this site from corporate to nebula. Corporate used to have the togglemenu, which allowed the customisation of the site to the smaller screen. I had hoped that with the visible/hidden classes I can bring-up a different menutree for the non-desktop screens.

Please have a look at our test site: test.dalinyebo.com/

Any ideas?

Thank you,
Philipp

Hi Phillip,

The menus in Nebula don't actually work this way but it possible to man handle it.

So if you need to have duplicated menus in the off canvas menu you would need to do something like what you are doing however css cant handle integers as the first or only part of a selector name.

So you need to change it to nav1 and nav2 or something like that.

Then in your custom.css module do something like this:

@media ( max-width: 759px) {
#nav2 {display:block}
}

@media ( min-width: 760px) {
#nav2 {display:none}
}

That would hide the second menu above 760px and display it below.

Just adjust the px values to suit your means.

Thanks

Hi Anthony,
that worked beautifully.
Thank you,
Philipp

Thanks for letting us know

Good luck with the rest of the site

Cheers
Paul