Page 1 of 1

Responsive Menu Question

Posted: Mon Jun 10, 2019 8:58 am
by martin.mattel
Adding: Toolbox -> Responsive Menu (the one with the hamburger on the left)
Configuring the items and the icons, setting fullwidth to true, a background color.
The RM is embedded in a Layout Grid with right/middle alignment.

The menu is working fine, it shows as a single bar which is right browser window aligned.
One issue popĀ“s up.
At the moment where you reduce the screensize and the RM becomes 2 columns, the upper column is as before full size, but the new column is only as long as you have items and not full size, means you have a gap to the right. This looks awful.

Is there a setting I have missed or is this something you could fix in a new version?

Re: Responsive Menu Question

Posted: Mon Jun 10, 2019 10:03 am
by Pablo
To be able to help you I need to see what you have done.
Can you please share a demo?

Re: Responsive Menu Question

Posted: Mon Jun 10, 2019 1:29 pm
by martin.mattel
Sure:
--removed--
I will cancel the login data latest tomorrow.
Let me know if you want/have a location to upload the project.

Many thanks to take a look on !

Re: Responsive Menu Question

Posted: Mon Jun 10, 2019 1:33 pm
by Pablo
What you see is normal HTML behavior.
You should increase the value of the menu breakpoint to where is actually 'breaks'.

Re: Responsive Menu Question

Posted: Mon Jun 10, 2019 2:46 pm
by martin.mattel
I gave that a try.

The bad thing is, that setting the menu breakpoint to the new value will not show the items in the bar anymore but immendiately the hamburger - this is what I also expected. It is preventing multilining but not as intended...

It is just some thinking, but a kind of checkmark like "Stay in single column" (yes/no) would help a lot.
Triggers when switched from single to multiline and behaves like the breakpoint.

I hope you do not mind if my approaches are shomehow clueless, but this gives me the freedom to think out of the box :D

Re: Responsive Menu Question

Posted: Mon Jun 10, 2019 2:55 pm
by Pablo
The menu items are floating elements, their size depends on the text length and padding.
If the items do not oit on one row then the browser will overflow to the next row.
This is standard HTML behavior. That is why these type of menus have a breakpoint so you can control when the menu switches to mobile mode.

There is no 'multi row - full width' functionality in HTML.

Re: Responsive Menu Question

Posted: Mon Jun 10, 2019 3:37 pm
by martin.mattel
I did not know that this is a HTML thing.

But I have found a solution :lol:

I created a layout grid with one column, gave that column the background color and embedded the RM into it.
Then I embedded that LG into the top LG at the place where the RM was before and voila, it is working now as expected. The underlaying LG sizes depending on the number of RM columns and gives me therefore the full background color.

This might be a good thing to be added in the RM help like the tip you already have there.
"In case the RM becomes multilined, embed the RM into a LG with the same background color to get a fully colored multi column." (Sorry, many ideas where I just highlight but have no work :lol: )