Breakpoints in CSS Menu

[wb_user]

hi
how i can use this:
- Improved: Breakpoints in CSS Menu now work seperately from page breakpoints.

[crispy68]

Simply open up the css menu and set the breakpoint to what you want. What this means is the breakpoint is independent from the breakpoints you set in your project.

[wb_user]

Simply open up the css menu and set the breakpoint to what you want. What this means is the breakpoint is independent from the breakpoints you set in your project.

i think before. so i set menu 1 , menu 2 , menu 3 , menu 4 in default breakpoint and set menu 4 , menu 3 , menu 2 , menu 1 in 320 breakpoint but it not work

[Pablo]

This option has nothing to to with the order of the menu items.
It specifies when the menu will switch from horizontal layout to vertical layout.

[gsangiov]

Does not seem to work for me either.

I create a blank page and just insert a CSS Menu with 7 Items to test.
I set the Layout Mode to Responsive in the Style tab of the CSS Menu.
I set Breakpoint to 375 in the RWD tab of the CSS Menu.

I run in preview with Firefox and the CSS Menu does not switch from horizontal to vertical.

Thanks ...

[Pablo]

To able to help you, I need a demo project.

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

Note that this is not a new feature, the only difference is that the breakpoint now works independently from page breakpoints.

[crispy68]

Did you add any breakpoints? I believe you would need to add a page breakpoint that is less than the breakpoint for the menu for it trigger from horizontal to vertical. Otherwise, it will never change.

@Pablo, I'm not sure that the menu is being switched at the exact number entered for the RWD breakpoint. I would think there needs to be a specific media query generated for that breakpoint for the menu to switch but based on my tests it doesnt seem to be using that number entered.

My example:

1. open WB, insert the CSS menu and set layout mode to responsive. Set the breakpoint of menu to 480. Default = 970px.
2. In manage breakpoints, choose 2nd option: activate breakpoints when browser window is larger than the device width.
3. Preview. There is no breakpoint other than default view. There is no media query generated for the menu itself in the css code so it stays horizontal and never flips to vertical.
4. Go back and add a 320 page breakpoint. In the 320 breakpoint adjust the css menu to fit in the 320. It shows as vertical now. This is correct as it should be since the breakpoint of menu is 480.
5. Preview. Menu does switch. However, it doesnt switch at 480 but switches at 969 (1 less than the page breakpoint). It should stay horizontal until 480 is reached and then switch.
6. If I change the media query in the css code to 480, then it works as intended. The 480 chosen is nowhere in the css code.
7. Now if i change the option in #2 above to the 1st option, when it reaches 480 it doesnt switch at all until it hits the 320 page breakpoint.

[Pablo]

Unlike in previous versions, in the latest build (5/29/2020), you no longer need to add breakpoints to the page for the CSS menu breakpoint to work.
This is what 'wb_user' was referring to in the release notes of the 'hotfix' that was release yesterday:

- Improved: Breakpoints in CSS Menu now work seperately from page breakpoints.

[crispy68]

Sorry Pablo,

I didn't realize there was a hotfix released recently. I'm usually on top of those. I just tested with the update and all seems to be working.