How to create two lines of items in the Main Menu

[Peace Freak]

I'm in the process of converting a non-Joomla site to Joomla. The old site has a side menu with 12 items. I would like to put those items in the Main Menu, so that when viewed on a mobile device, they appear in the mobile hamburger menu. This will make navigating the site easy...

I added the 12 items to the Main Menu, but on my computer screen, as there are so many, they go off the right edge of the screen.

Is there a way to get them to wrap so that they form two lines that adjust to the width of the browser window?

Thank you!

[stutteringp0et]

depends on the template you're using. In Cassiopeia, you can choose a custom layout for the menu module which enables all of the bootstrap collapsing hamburger menu features.

[Peace Freak]

Thank you for your response. I'm using Cassiopeia...

In Content/Site Modules/Main Menu/Advanced I have chosen Collapsible Dropdown.

Could you be more specific as to where to find the custom layout options.

Thank you!

[Pavel-ww]

Is there a way to get them to wrap so that they form two lines that adjust to the width of the browser window?

Hi. I don't think the existing layout settings of the module can solve this problem. It can only be done through CSS. Please provide the URL of your website. Without this, it is impossible to help.

[jasmineara]

This CSS will make the menu items wrap and adjust their layout depending on the screen width. You might need to tweak the "flex" values depending on your desired design, but this should get you started!

[Per Yngve Berg]

Would it not make more sense to group them into sub-menus?