Responsive Menu Question

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
martin.mattel
 
 
Posts: 56
Joined: Thu Oct 04, 2018 3:04 pm

Responsive Menu Question

Post by martin.mattel » Mon Jun 10, 2019 8:58 am

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?

User avatar
Pablo
 
Posts: 17639
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu Question

Post by Pablo » Mon Jun 10, 2019 10:03 am

To be able to help you I need to see what you have done.
Can you please share a demo?

martin.mattel
 
 
Posts: 56
Joined: Thu Oct 04, 2018 3:04 pm

Re: Responsive Menu Question

Post by martin.mattel » Mon Jun 10, 2019 1:29 pm

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 !
Last edited by martin.mattel on Mon Jun 10, 2019 2:22 pm, edited 1 time in total.

User avatar
Pablo
 
Posts: 17639
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu Question

Post by Pablo » Mon Jun 10, 2019 1:33 pm

What you see is normal HTML behavior.
You should increase the value of the menu breakpoint to where is actually 'breaks'.

martin.mattel
 
 
Posts: 56
Joined: Thu Oct 04, 2018 3:04 pm

Re: Responsive Menu Question

Post by martin.mattel » Mon Jun 10, 2019 2:46 pm

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

User avatar
Pablo
 
Posts: 17639
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Responsive Menu Question

Post by Pablo » Mon Jun 10, 2019 2:55 pm

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.

martin.mattel
 
 
Posts: 56
Joined: Thu Oct 04, 2018 3:04 pm

Re: Responsive Menu Question

Post by martin.mattel » Mon Jun 10, 2019 3:37 pm

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: )

Post Reply