Mega Menu not working well on mobile

How To
1

Hi all, I am having 2 issues with mega-menu. I haven’t posted this in ‘Bugs’ because it is probably due to my misunderstanding, however here are the two problems I am having…

When I view on an actual phone: 1 column (1fr) on mobile portrait:

  1. On an actual mobile, the mega-menu is a very narrow column down the middle. Note: it looks fine on Bricks canvas and Chrome tools.

  2. when the mega-menu dropdown is open on mobile, it is not possible to scroll up to see the first menu items.

Can you help me see what I am doing wrong?

https://try.bricksbuilder.io/t999d618/mega-menu-test/

IMG_0A2FCBAB9E6E-1
IMG_0A2FCBAB9E6E-11125×2001 99.2 KB

Screenshot 2024-03-18 at 14.34.58
Screenshot 2024-03-18 at 14.34.582032×1169 287 KB

2

This is an issue on all the iPhones I’ve tried so far.

3

Hi Simon,
Safari has problems in some situations with the “simple” fr unit that you use for your grid template columns.

A simple and efficient workaround is to use minmax(0, 1fr) instead of e.g. a simple 1fr.

:x: grid-template-columns: 1fr

:white_check_mark: grid-template-columns: minmax(0, 1fr)

The same applies to multiple columns.

:x: grid-template-columns: 1fr 1fr 1fr

:white_check_mark: grid-template-columns: repeat(3, minmax(0, 1fr))

Best regards,
timmse

CleanShot 2024-04-02 at 14.37.43@2x
CleanShot 2024-04-02 at 14.37.43@2x1920×1433 263 KB

4

Thank you @timmse. I have changed to the CSS you referenced which has now made them 100% width which is great.

But still, in both iPhone Safari and Chrome, it’s still not possible to scroll up to the top menu items.

https://try.bricksbuilder.io/t999d618/mega-menu-test/

IMG_6223C5AF57DF-1
IMG_6223C5AF57DF-11125×2001 180 KB

5

On my iPhone, the grid is still displayed strangely, which is either because you have placed the grid directly on the dropdown content wrapper, or it is missing a width.

Please add width: 100% to the grid or add another block element to the dropdown content and assign the grid to it.

The problem with the height is probably caused by the justify-content: center, which you should change to justify-content: start for the mobile menu. Then it should actually work… :pray:

6

Thanks @timmse

I hadn’t set the Mobile menu to justify-content: center, so it must be that by default? But setting justify-content: start for the mobile menu helped the height problem.

I tried adding 100% to the ‘dropdown > content’ grid. But that didn’t make a difference to the width issue.

So then I tried removing grid from ‘dropdown > content’ and added a new block within instead.

This worked, although in the menu when the dropdown is activated the ‘Dropdown’ and ‘down icon’ shoot to opposite ends?

Bricks menu builder seems tricky to use. I’d really love to know what best practice is for creating these mega menus, so as to reduce the dev time to create them.

Screenshot 2024-04-03 at 11.26.23
Screenshot 2024-04-03 at 11.26.23444×852 320 KB

7

Yep, that’s a default.

The submenu toggle needs align-self: center in your case.

CleanShot 2024-04-03 at 12.52.41@2x
CleanShot 2024-04-03 at 12.52.41@2x1920×465 108 KB

I agree, but making such a complex element “simple” for all possible scenarios is extremely difficult. We are trying to improve the element over time. At the moment, you have to play a little trick here and there… The proof of the pudding is in the eating :smiley:

1 Like
8

Understood :slightly_smiling_face: thank you very much for taking the time to help me understand @timmse.