Responsive Menu Breakpoint Not Work Correctly

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
code2
 
 
Posts: 16
Joined: Thu Mar 30, 2017 5:19 am

Responsive Menu Breakpoint Not Work Correctly

Post by code2 » Tue Nov 06, 2018 4:47 am

Hi

I use a Responsive Menu enclosed in a PageHeader at the top of my the pages on my site.

Breakpoints are not used in the pages for responsive design. But a breakpoint is set in the Responsive Menu.

Apart from the one PageHeader at the top of each page, Layout Grids are used for all other containers to obtain responsive design.

I remember when the Responsive Menu came out that I thought it was great and I am quite certain I tested the breakpoint function so that various screen resolutions on mobile devices and desktops would swap correctly between the Hamburger Menu and a normal horizontal (full) menu across the top of the page. However, that was a little while ago and I have not changed much on our website since.

But now, I have noticed that even with a breakpoint of 500 in the Responsive Menu, it no longer swaps between the two modes on any mobile device even ones with really high resolution (iPad Pro or HTC Mobile Handset).

On a full desk top, it will display the full menu. However, using Firefox's Ctrl-Shift-M function to change resolutions even with 1920x1080 it change from Full to Hamburger (1080x1920). I have re-tested several screen resolution changes and all with the same result. anything equal to or less than 1250 forces the Hamburger menu to appear. At 1251 the full menu appears. 1250 just also happens to be the Page Width setting for a target width of 1280 in Page Properties.

I have tested it with a similar wtb file from Web Builder which uses a 1200 page width setting and a Layer instead of a Page Header and I have deduced it has something to do with the page width. Has anyone else notice this?

I have checked and changed the breakpoint in the Responsive Menu several times to test but get the same result.

Any ideas.

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

Re: Responsive Menu Breakpoint Not Work Correctly

Post by Pablo » Tue Nov 06, 2018 6:55 am

To be able to help you I need a (demo) project so I can see all your settings.
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134

code2
 
 
Posts: 16
Joined: Thu Mar 30, 2017 5:19 am

Re: Responsive Menu Breakpoint Not Work Correctly

Post by code2 » Wed Nov 07, 2018 8:06 am

Thanks

Link is (case sensitive):

http://targe.com.au/Responsive_Menu_Problem.wbs

I have striped all other pages and unaffected items off the home page.

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

Re: Responsive Menu Breakpoint Not Work Correctly

Post by Pablo » Wed Nov 07, 2018 8:23 am

It seems to work correct. When the viewport is lower than 800 pixels, the mobile menu is displayed.
What exactly do I need to do to see the problem?

code2
 
 
Posts: 16
Joined: Thu Mar 30, 2017 5:19 am

Re: Responsive Menu Breakpoint Not Work Correctly

Post by code2 » Fri Nov 09, 2018 11:16 am

That’s interesting because for me the Hamburger menu or what should show at or under 800 and what should display above that doesn’t change until 1251.

I tested the wbs file I gave prior to posting it and the same problem existed.

Please view www.targe.com.au using an android device with high resolution or an iPad Pro (768 x 1024 using Firefox and Chrome).

Rotate to change resolution etc. See if full menu appears.

For me the over 800 breakpoint change to full horizontal menu (showing icon) does not kick in at all. And, as mentioned on a desktop using Firefox it only displays full horizontal menu with icon at 1251 and higher.

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

Re: Responsive Menu Breakpoint Not Work Correctly

Post by Pablo » Fri Nov 09, 2018 12:04 pm

The moment of switching to another breakpoint is controlled by the option 'Include min-width in CSS3 media queries'.

Related FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817

code2
 
 
Posts: 16
Joined: Thu Mar 30, 2017 5:19 am

Re: Responsive Menu Breakpoint Not Work Correctly

Post by code2 » Sat Nov 10, 2018 10:24 am

As I am not using a text objects for the menu, I cannot locate that setting about the CSS option 'Include min-width in CSS3 media queries'

I actually don't use any breakpoints on any of my pages my pages. I simply let the Layout Grid or Layer work out the appropriate sizing on a device. 99% of the time all look decent on various devices.

Just now test the same design from the *0 Se***d Web Builder templates (responsive2_11) and the same thing happens.

Therefore, I suspect that I need to experiment more with other objects (Page Headers, perhaps to see if I can get the RWD effect). That is, if it can be done at all.

If I find anything useful, I come back.

Thanks for your time.

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

Re: Responsive Menu Breakpoint Not Work Correctly

Post by Pablo » Sat Nov 10, 2018 12:13 pm

You can find the option in 'Manage breakpoints'

This option also applies to the breakpoint of the responsive menu.

code2
 
 
Posts: 16
Joined: Thu Mar 30, 2017 5:19 am

Re: Responsive Menu Breakpoint Not Work Correctly

Post by code2 » Sun Nov 11, 2018 8:17 am

Thanks

I have worked out that to make it work as intended, you have to actually have a breakpoint in a page.

The breakpoint in the Responsive Menu didn't behave as I had expected and I think that was the problem.

Apologies, I really don't know how I imaged it was working as I expected before when I tested the site. I did before use page breakpoints. Perhaps I tested the Responsive Menu back then.

I would prefer to leave my site's pages without specific breakpoints. It is less settings to worry about and everything on the pages is in Layout Grids and, so far, they are naturally responsive. It really does hurt to leave it as is. I think nearly everyone knows that the Hamburger Icon is a menu now-a-days and most desktops are over 1280. So on a desktop is displayed a full menu.

I think I'll just put in a feature request for the Responsive Menu to be perhaps a little more independent and perhaps behave also like a layout grid with it own RWD behaviour.

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests