Styling mobile dropdown menu: content layout issues

Design help General
1

Hello everyone!
I’m a pretty new webflow user so this is probably going to be a real noob question.
I spent some time on the forum unsuccessfully looking for a previous thread that already solved this issue.

I’m editing the mobile version of my site, specifically the dropdown menu.
I’d like to display the content of the menu on an horizontal row of columns but it seems like there’s no way to bypass the default vertical layout for mobile devices.
I’ve already tried to replace the automatically generated row with a new one without getting different results.
How am I supposed to change these settings?

Thank you in advance.

This is the desktop version of the menu.

1920×534 1.2 MB

While this is the tablet version I wish to modify.

827×727 713 KB

2

Oh yes there must be (:

Can you please share your project’s public link so it’s easier to help you?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link

3

Here’s the link!
https://preview.webflow.com/preview/stephlucente?preview=f9d3e2f93651262709a08134f60b65fc

4

I like you enthusiasm but it doesn’t work (:

5

Guess that was the wrong link :stuck_out_tongue:
http://stephlucente.webflow.io/

6

No no it should be a “preview” link… yours looked like one but it didn’t work… can you generate it again?

7

Here’s the new one! Hope it works this time.

https://preview.webflow.com/preview/stephlucente?preview=d9051addce0d777376f30218da9c3e59

8

It did (:

THAT 580 PIXELS PADDIN MAN! hehe

That and also you’re using a ROW for your menu and you have to tell the row to continue to display columns as colums for each breakpoint.

All that in the video

https://v.usetapes.com/QGWCVAx2nP

9

Thank you very much Vincent!
I “had” to add that huge padding to the desktop dropdown menu to make it squeeze the columns/icons to the centre of the screen, then I forgot it was there. :stuck_out_tongue:
Now the mobile menus work like a charm!

How am I supposed to get the “squeezed” effect without using THEM HUGE PADS?
I guess using individual column styles with fixed width is not a viable solution since the column uses the section width as default. Better take a look to the settings tab…

Solved!

10

So you can ditch to row element alltogether and use simple link blocks set to display:inline-box… they will nicely float one close to another.

inline-box is very convenient for layout.