www.wysiwygwebbuilder.com

Has something changed with the behavior for "Responsive menu" in WYSIWYG version 15.4.1 versus 15.1?

I had updated a website I designed 3 years ago using version 15.1 with some content and cosmetic changes and used the Responsive Menu instead of the original CSSMenu on May 23rd with a page break point set for 320 so the site would be mobile friendly. This worked fine as I could shrink the browser and the menu would flip to a "Hamburger" properly.

The other day, I installed the latest version of Webbuilder v15.4.1 on a Windows 10 laptop (clean build - no Webbuilder on it) and was planning on making some slight changes and noticed then when previewing the pages and shrinking the browser down, the Responsive Menu used to go from full content directly to the "hamburger" but now as I shrink the browser in my preview, the Responsive Menu icons get compacted cluttering the page contents before going to a "hamburger".
That said a browser in 3/4 quarter of the screen looks fine but the Responsive Menu icons clutter the page as I start shrinking it down until apparently a break point is hit. The behavior is the same in different browsers. This issue only occurred when I installed the latest WB 15.4.1 version.
The "Responsive Menu" break point in the Style section was the default of 768 which worked fine when shrinking the browser page preview in v 15.1 but not in v 15.4.1.
The production website that was updated using Webbuilder v15.1 and functions properly regarding the Responsive Menu icons when shrinking the browser is: www.allaroundabstract.com

This is the same project which worked fine in version in v 15.1 but when opened in v 15.4.1 and previewed, the Responsive Menu behaves differently. Once the browser is shrunk down to "mobile friendly" size (break point 320), then it appears and functions normally but the icons are skewed/cluttering the screen as the browser is shrunk down from full screen mode. This occurs on all pages and is not isolated - remember original WBS project with no changes, just new WB version.
Nothing was changed with break points, only some page meta tags and personnel pictures were planned to be updated, etc. I cannot update the website since this will become messy looking with the Responsive Menu icons cluttering the screen if the browser is shrunk smaller.

I have some screen shots to show the results but was unable to get them in this post (would be great if I could do a direct embed). I can provide the original good .WBS project (which worked fine in WB v 15.1) via email, Dropbox or similar.

Please advise as I love the Responsive Menu look and feel and want to continue using it but need for it to behave properly with break points as it did before in WB v15.1.

Leo Clugh
lac8383@comcast.net

One thing I just tried was I had used layers set to a page width of 1170. The Responsive Menu sat on the upper layer with the same width (1170).

If I went to Properties for Responsive Menu, then Style and set the break point to 1169 for the Responsive Menu (1 below the page width of 1170), then as I shrank the browser width, as soon as it hit that page width it would flip to the "hamburger" icon without the cluttering if icons.

It didn't behave that way before as the default BP was 768 for the menu but allows me a "workaround" so the Responsive Menu icons don't show as cluttered and covering part of the web page. This workaround isn't what I wanted for the long term but I guess doable for the moment.

I still need to know if this is some bug regarding Responsive Menu displaying clumped up icons as the browser is reduced in width. It worked fine before.

In recent versions of the software the breakpoint of the Response Menu is independent of the page breakpoints.
This means that menu now switches from desktop to mobile mode at the specified breakpoints, unlike in previous version where is was linked to page breakpoints which could lead to confusion.

Note that this is mentioned in the release notes and was implemented based on user feedback.
https://www.wysiwygwebbuilder.com/forum ... =1&t=88129

Hi Pablo,

Well, this doesn't seem to be working as described. If I set the Responsive Menu to say BP 320, 480 or 768 and have a page BP set for 320 so it's mobile friendly, as I reduce the width of the browser, the menu icons get skewed and cover part of the page which looks terrible. If the Responsive Menu break point is set larger than 320 then eventually is will go to "hamburger" mode. However, if the browser is shrunk down to some degree to say half the size, the menu icons skew and cover part of the page which makes it useless.

Setting the Responsive Menu to BP 320 and a page BP to 320, the menu never goes to "hamburger" mode. The Responsive Menu has to be something larger than BP 320 but again the messy icons. My workaround as described before is to set the Responsive Menu to 1169 as my layer is 1170. This will flip to "hamburger" mode as I shrink the browser but I don't want that to occur until I hit that 320 BP. Anything in between and the icons are skewed making the web page a mess.

Enclosed is a picture of what I am describing.


Also, the .WBS project can be reach here.
https://www.allaroundabstract.com/All_A ... 3A_RWD.wbs

I really didn't understand why the changes to handling the Responsive Menu BP's because it worked fine before but not now.

Please advise on how I can make this work properly as it did in WB v 15.1 so that shrinking the browser will cause the menu to flip to "hamburger" at the 320 break point. Right now, it won't work in WB v15.4.1
Leo

Hey Leo,

I see you are using fixed layers versus floating for your design. Your breakpoints are pretty far apart.

Setting the menu to 1169 like you have works! This is what its supposed to do. The way you have it set up is any screen larger than 1170 sees the default view and everything less than 1170 sees the 320px bp view. So when the screen is shrunk less than 1170 they see the mobile view and should see the mobile menu which is what it does.

Sounds like you want the menu to stay horizontal just down to the point where it starts to wrap to the next line and then flip to mobile. The problem with your setup is that the menu at about 768px looks good and then starts to wrap at that point which is what you were seeing.

To solve this, based on your menu and the icons, if you simply add a 768 breakpoint and have the menu break when it is less than this (767px) then it will work more how you want it. Plus adding the BP will give you a bit more control on what the page will look like for screens in between 1170 and 320.

Thank you very much for your quick response and helpful tips!

I wanted to get them "mobile friendly" quickly so I didn't experiment with adding other BP's at that time. There are other minor changes I want to do but that's when I saw this behavior after installing the newer WB 15.4.1.

I will look at making some changes to see if I can get this working better with additional BP's, etc. I just need to make sure that shrinking the browser doesn't end up with those skewed icons in the menu at any point which would look awful.

I'll let you know how this works out.

Leo

Hi Crispy68,

Adding the additional break point (768) as suggested worked well when resizing the browser down in size. This gave me the needed look and feel going from normal size 1170 to break point 768 and then 320. I made the website updates as needed and it all tested out - it's working exactly as I wanted now.

Many thanks for your suggestions - it was spot on!!

P.S. I fiddled slightly with floating layers as suggested but didn't spend enough time working with it to really see what it can do. I'll try giving this a whirl down the road.

Best regards,
Leo