Does Responsive Menu work with Flexbox Container?

[lummis]

I am using a Flexbox Container for the layout of a page and have tried to add the Responsive Menu as I would like to have a 'hamburger' menu on mobile devices. I have a simple test page at [url]http://www.s********.org.uk/test/members_home.html[/url] and the Responsive Menu has the Breakpoint set at 768.
I am guessing that the container and the menu are not compatible and, if so, I would welcome any workaround.

Brian

[Pablo]

With the current settings the menu has a fixed size!
You will need to set flex grow/shrink to 1 (or another value to make it flexible).

[lummis]

You will need to set flex grow/shrink to 1 (or another value to make it flexible).

Sorry Pablo, I can't see a setting for this in the Responsive Menu or the Flexbox Container. Where do I need to put this value?

Brian

[Pablo]

Please read this related tutorial to learn about the basics of FlexBox.
http://wysiwygwebbuilder.com/flexbox.html

[lummis]

And I thought that I had read it - apologies for troubling you

Brian

[lummis]

Unfortunately I am still struggling to find the answer to this problem.

I have taken the page down to basics with a Flex Box Container with a Responsive Menu placed on it. As I want the menu at the top horizontally I have set the Flex Direction to Column. As suggested I have set the Flex grow to 1 to make it flexible. Using an emulator for an iPhone 7 the result is nearly ok but the menu does go outside the viewport and may not be readable. On my Android phone the menu just shrinks so the full menu is shown but the text and icons are too small to read.

The test page is at [url]http://www.*********.org.uk/test/index.html[/url]

The test file is at http://www.mediafire.com/file/***************/Test.wbs

What have I got wrong?

Brian

[Pablo]

'Align items' should be set the 'stretch'

[lummis]

Many thanks, Pablo - a simple change producing much better results. My android phone is still not showing a 'hamburger' menu after making the change although the emulator does show one. I have cleared the cache, so that is not the problem, so guess that it must be my phone although it is using Android 6 and the Chrome browser.

If there is anyone with an Android phone, could they have a look at the test page [url] http://www.*********.org.uk/test/index.html[/url] to see if the page comes with a 'hamburger' menu or just a standard navigation bar.

Brian

[Chris_t]

It's a standard navigation bar on my Android phone.

[lummis]

Thanks Chris, looks like it might be an Android problem. As long as there are not too many items in the menu it seems to be readable in landscape mode.

[lummis]

Having slept on this, I have resolved my problem! The easy solution was to take the Responsive Menu off the Flexbox Container and place it on a Layout Grid at the top of the page with the Flexbox Container underneath. The menu now defaults to a 'hamburger' on my Android phone.

It just goes to prove that there is always another way!

Brian