Does Responsive Menu work with Flexbox Container?
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/links.html
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Does Responsive Menu work with Flexbox Container?
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
I am guessing that the container and the menu are not compatible and, if so, I would welcome any workaround.
Brian
Last edited by lummis on Tue Feb 20, 2018 12:31 pm, edited 2 times in total.
Re: Does Responsive Menu work with Flexbox Container?
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).
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?
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?You will need to set flex grow/shrink to 1 (or another value to make it flexible).
Brian
Re: Does Responsive Menu work with Flexbox Container?
Please read this related tutorial to learn about the basics of FlexBox.
http://wysiwygwebbuilder.com/flexbox.html
http://wysiwygwebbuilder.com/flexbox.html
Re: Does Responsive Menu work with Flexbox Container?
And I thought that I had read it - apologies for troubling you
Brian

Brian
Re: Does Responsive Menu work with Flexbox Container?
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
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
Last edited by lummis on Tue Feb 20, 2018 12:29 pm, edited 1 time in total.
Re: Does Responsive Menu work with Flexbox Container?
'Align items' should be set the 'stretch'
Re: Does Responsive Menu work with Flexbox Container?
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
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
Last edited by lummis on Tue Feb 20, 2018 12:29 pm, edited 1 time in total.
Re: Does Responsive Menu work with Flexbox Container?
It's a standard navigation bar on my Android phone.
Re: Does Responsive Menu work with Flexbox Container?
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?
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
It just goes to prove that there is always another way!
Brian