Page 1 of 1

Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 1:38 pm
by 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

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 2:17 pm
by 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).

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 2:46 pm
by 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

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 2:50 pm
by Pablo
Please read this related tutorial to learn about the basics of FlexBox.
http://wysiwygwebbuilder.com/flexbox.html

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 2:55 pm
by lummis
And I thought that I had read it - apologies for troubling you :oops:

Brian

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 5:18 pm
by 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

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 6:05 pm
by Pablo
'Align items' should be set the 'stretch'

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 7:19 pm
by 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

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 8:42 pm
by Chris_t
It's a standard navigation bar on my Android phone.

Re: Does Responsive Menu work with Flexbox Container?

Posted: Mon Feb 19, 2018 8:46 pm
by 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.

Re: Does Responsive Menu work with Flexbox Container?

Posted: Tue Feb 20, 2018 12:28 pm
by 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