Responsive menu has an mind of its own on page break

[Spinner]

I have a responsive menu inside of a flex container on my master page. All pages have the default , 835 and 380 pixel page breaks, menu looks fine on all those page breaks in WWB. But if I preview or publish at about 700 I get a weird artifact you can see here:
https://www.datapath.us/menu.html
I can send the WBS if you need

[crispy68]

I don't see anything at 700px. The menu is in hamburger mode and looks ok. Where do I need to look to see the artifact?

[Spinner]

Just between the hamburger width and the four menu items in a line the home button drops below blog For about 50 pixels of width.
Also how do you get that menu to show full browser width?
On Properties on the flex container it is inside of I have full width set to true..

[crispy68]

I see where your horizontal menu wraps to the next line for short bit before it switches to hamburger menu. This is because the width is set to 360px and your menu is wider so it wraps. What do you have the breakpoint set to in the Menu itself? Looks like 834px. If so, try setting it to 768px.

[Spinner]

Changing the breakpoint in the menu itself to what the breakpoint on the page is fixed the problem of the menu wrapping.
Thank you

How do you force the menu to take up the full viewport width at all breakpoints?. I have the full width switch on the menu properties/style

[Spinner]

When I publish this the menu looks okay in my page named menu, but if you hit the home button it goes to the index page and I get a bunch of text instead of a menu.
https://datapath.us/menu.html

[BaconFries]

Personally I dont see any change it doesn't matter what I select/clickon it stays on the same page. Can I ask why the page is named menu? page names generally are named after the content not after the navigation (menu) a example your Home page = index.html about = about.html Other Datapath Products=products.html just curious and my two cents.

[Spinner]

My menus are now magically working okay, strange almost like a timing thing where it takes a while for my server to render the index page correctly or something..

I only named the page menu as a demonstration to show you, it's not the final name I will use,, But thank you for mentioning this.
I am just experimenting with and learning WWB

Do you have any comment on my question about getting the menu to go full viewport width Dynamically with window size?

[BaconFries]

You can place the menu on a page header matching its colour to that of the menu.

[crispy68]

Do you have any comment on my question about getting the menu to go full viewport width Dynamically with window size?

Since you've placed it into a flex container, right click on the menu, select Flexbox and set the Flex Grow and Flex Shrink to 1.

[Spinner]

Thanks, both of those worked but I found that changing the container to a Flex Grid was best, after adding something to the side of the menu on same line in default and below @ 380.