Does Responsive Menu work with Flexbox Container?

Issues related to hyperlinks and web site navigation.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/links.html
Post Reply
lummis
 
 
Posts: 99
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Does Responsive Menu work with Flexbox Container?

Post by lummis » Mon Feb 19, 2018 1:38 pm

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
Last edited by lummis on Tue Feb 20, 2018 12:31 pm, edited 2 times in total.

User avatar
Pablo
 
Posts: 14131
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Does Responsive Menu work with Flexbox Container?

Post by Pablo » Mon Feb 19, 2018 2:17 pm

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
 
 
Posts: 99
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Does Responsive Menu work with Flexbox Container?

Post by lummis » Mon Feb 19, 2018 2:46 pm

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

User avatar
Pablo
 
Posts: 14131
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Does Responsive Menu work with Flexbox Container?

Post by Pablo » Mon Feb 19, 2018 2:50 pm

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

lummis
 
 
Posts: 99
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Does Responsive Menu work with Flexbox Container?

Post by lummis » Mon Feb 19, 2018 2:55 pm

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

Brian

lummis
 
 
Posts: 99
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Does Responsive Menu work with Flexbox Container?

Post by lummis » Mon Feb 19, 2018 5:18 pm

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
Last edited by lummis on Tue Feb 20, 2018 12:29 pm, edited 1 time in total.

User avatar
Pablo
 
Posts: 14131
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Does Responsive Menu work with Flexbox Container?

Post by Pablo » Mon Feb 19, 2018 6:05 pm

'Align items' should be set the 'stretch'

lummis
 
 
Posts: 99
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Does Responsive Menu work with Flexbox Container?

Post by lummis » Mon Feb 19, 2018 7:19 pm

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
Last edited by lummis on Tue Feb 20, 2018 12:29 pm, edited 1 time in total.

User avatar
Chris_t
 
 
Posts: 71
Joined: Thu Oct 27, 2016 7:39 pm

Re: Does Responsive Menu work with Flexbox Container?

Post by Chris_t » Mon Feb 19, 2018 8:42 pm

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

lummis
 
 
Posts: 99
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Does Responsive Menu work with Flexbox Container?

Post by lummis » Mon Feb 19, 2018 8:46 pm

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
 
 
Posts: 99
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Does Responsive Menu work with Flexbox Container?

Post by lummis » Tue Feb 20, 2018 12:28 pm

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

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest