Menu block responsiveness issue

Hi Cwicly community :slight_smile:
I am struggling with a simple menu block placed in a footer.
I set it to horizontal layout on desktop, but then once on mobile, it is still horizontal and overflows horizontally, which makes the whole body horizontally scrollable, which is a big problem.
I cannot change the layout to vertical on mobile and I tried the solution found on the forum with a relative style but it doesn’t work for me. Is the only solution to hide it on mobile and have a second menu block with a vertical layout?
My biggest concern is actually more the whole body overflow behavior. Could other blocks behave the same way and is it possible to make sure the body will never be horizontally scrollable? I tried css with body {overflow:hidden}, but it broke some other blocks display.
Thank you for your help

Having exactly the same question :grinning:

Hi @Hyperbrand,

Just to check, are you using a Menu block or a Nav block?

Depending on your answer, there is a different working solution that we use for each case that I can share with you.

Hi @John2324 and @Hyperbrand

I had the same issue and solved it with two divs and two menu-components with the same menu
in the first div I set the menu to horizontal. But I set the layout to none for mobile view.

The second div is not visible on desktop view, only on mobile. here I have a vertical menu.

Hi @StrangeTech,

I am using the Menu block. Maybe I shoujld try use the Nav block if it is more versatile.

Hi @Lijn-B, that’s what I want to avoid if possible. But if there is no better way for a responsive footer menu I will try this. Thanks.

Yes, definitely more versatile. If you use the Nav block you can simply select the Nav Items block and change the Layout settings responsively like with any other block, so this is definitely the most efficient approach.

Here is a still working tutorial (just double checked it):
Change Menu Layout on various Breakpoints - Tips - Cwicly

If you are referring to my above linked mini tutorial, I’m glad to help you if you can tell me what the issue on your end is.

@StrangeTech

Thanks, I will test this

@Marius

This looks like a good workaround. Thanks for sharing.