[Dublin Template] Menu Mode Costumization

Back to Forums

Post Closed

Carlos Henriques

Solved

[Dublin Template] Menu Mode Costumization

Question

Forge

Since the default menu size for desktops is too big it would be great if we could choose what menu mode we want for each device using some properties.

Example:
- Use tablet mode for desktops
or..
- Use Phone Mode for all formats

This would be similar to the behavior properties some SilkUI componets have.
This way I could easily force the Dublin Menu in desktops to be the same we have in tablets which is much better (slimmer and with the submenu items opening to the right of the menu).

02 Jun 2015

Samuel Jesus

Staff

Solution

Hello Carlos,

That solution will bring a lot of issues in the long run.

If you are forcing the properties from desktop to Tablet, then all other patterns you may want to use will also behave like a tablet.

The difference between the tablet and desktop menu is just CSS. Actually, the change that you are trying to do is already done to small Desktops, and in order to apply those classes, we used the classes .tablet and .desktop.small . So, our CSS looks like this:

If you want to override and force the menu to the tablet on your application, you just need to search all the usages to the class ".desktop.small", copy them to your application and change it to look like this:

Please keep in mind that you should add this CSS overrides on your application Theme, in order to keep the original Dublin CSS as is, so that you can later on easily upgrade your Dublin with the latests releases.

Please let us know if you need any more help.

Best Regards,
Samuel Jesus

See solution in context

04 Jun 2015

1 reply

08 May 2018

Show thread

Hide thread

Vinicius Schonardie

Samuel Jesus wrote:

Hello Carlos,

That solution will bring a lot of issues in the long run.

If you are forcing the properties from desktop to Tablet, then all other patterns you may want to use will also behave like a tablet.

How do I force to the menu phone mode?

08 May 2018

Carlos Henriques

Hi.

I'm trying to force the tablet menu to desktops.

I'm using SilkUI and jQuery to make this work:

In the menu web block preparation I have this:

In the "If Widget" I'm calling the IsDesktop() function from the SilkUI Framework.
In the RunJavaScript action (HttpRequestHandler) I'm running this jQuery:

$('.Page').removeClass('desktop').addClass('tablet');
$('.Application_Menu').css('width', '100%');

This works, but do you see any problem with this solution or is there a better way to do it?

04 Jun 2015

Samuel Jesus

Staff

Solution

Hello Carlos,

That solution will bring a lot of issues in the long run.

If you are forcing the properties from desktop to Tablet, then all other patterns you may want to use will also behave like a tablet.

04 Jun 2015

1 reply

08 May 2018

Show thread

Hide thread

Vinicius Schonardie

Samuel Jesus wrote:

Hello Carlos,

That solution will bring a lot of issues in the long run.

If you are forcing the properties from desktop to Tablet, then all other patterns you may want to use will also behave like a tablet.

How do I force to the menu phone mode?

08 May 2018

Carlos Henriques

Thanks Samuel.

I will try that way instead.

04 Jun 2015

Kasparas

Hello,
Samuel, according to your directions I managed to decrease the width of menu. However, it still does not behave like on Tablet or Small desktop, as my menu list is longer, and icons wont hide while on desktop. My thoughts are that it has something to do with '.desktop.MenuHideIcons .Menu_TopMenu a span.fa {display: none;}'.
Hope I made it clear.
Kasparas

04 Aug 2015

Samuel Jesus

Staff

Hello Kasparas,

Looking at your post, I'm not sure I'm getting what you are trying to do.
If you add an exception to the desktop to also hide the icons (like it does on the Tablet/Small Desktop), when will the menu icons be available on your application?

Can you please share a screenshot of the issue so that we can better help you?

Best Regards,
Samuel Jesus

04 Aug 2015

Kasparas

This is how it looks on desktop width:

This is when the width is of Tablet:

As I understand, it hides icons only when the menu height exceeds the height of the screeen, so icons will be visible.

04 Aug 2015

Pedro Oliveira

Hi Kasparas,

Thanks for your feedback. As I can learn from your latest screenshoots, the behavior of Dublin Theme is correct.
The script to remove the icons runs only for tablets.

Best regards,
Pedro Oliveira

17 Aug 2015

Kasparas

Hi, Pedro,

Yes, the behaviour is correct, however the problem I see is that on desktop, if there are more menu items, they are not visible, as you can see from my screenshot, I am not able to go to 'Products' category (on desktop with visible icons), as it hides, and there is no scroll bar.

Regards,
Kasparas

25 Aug 2015

Pedro Oliveira

Hi Kasparas,

Yes, in fact the menu stays hidden but since the menu width is smaller and scroll it's not supported in the menu, you can always try to use CSS to hide the icons on desktop. For this, try to use the ".desktop" class applied to the icons.

Best regards,
Pedro Oliveira

25 Aug 2015

Lukasz Cybula

Sorry for necro-ing, but I have an issue with the same menu, might be CSS related as well.

I use similar menu. When display indicates .desktop.small they have icons and text underneath. On desktop everything behaves exactly as intended, but when I use tablet the submenu does not show up at all. Tried it on Safari, Chrome and Firefox browsers.

Anyone else encountered such issue? CSS nor JScript were not altered, therefore it should work normally?

17 Oct 2016

Vinicius Schonardie

Vinicius Schonardie wrote:

Samuel Jesus wrote:

Hello Carlos,

That solution will bring a lot of issues in the long run.

If you are forcing the properties from desktop to Tablet, then all other patterns you may want to use will also behave like a tablet.

How do I force to the menu phone mode?

I want the when the page is in tablet size then its on the phone theme...

08 May 2018