How do you fix multirow menus in Dawn theme?

Store Design
, , ,

Topic summary

A user is experiencing layout issues with a multirow menu in the Dawn theme. The menu items are not displaying correctly in the header.

Initial Solution Attempt:

  • Another user provided CSS code targeting header menu elements with display: ruby-text property
  • This solution was tested but did not fully resolve the issue

Revised Solution:
A second CSS approach was suggested using:

  • Flexbox container with display: flex and flex-wrap: wrap
  • Properties for spacing (justify-content: space-between) and alignment (align-items: center)
  • Individual flex items with centered text alignment and 5px margins

Current Status:
The discussion remains open. The user confirmed the first solution didn’t work after implementation, and the effectiveness of the second CSS solution has not yet been verified.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

qwuco_0-1732270091201.png
qwuco_0-1732270091201.png1920×1200 377 KB

Store URL: https://qwu.co/

2

Hello, @qwuco

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
header.header.header--middle-left.header--mobile-center.page-width.header--has-menu
.list-menu--inline {
    display: ruby-text !important;
}
3

That doesn’t quite fix it, take a look at the site please, I’ve made the changes.

https://qwu.co/

4

Try this one @qwuco

.row-container {
    display: flex !important;
    flex-wrap: wrap !important; 
    justify-content: space-between !important;
    align-items: center !important; 
}

.row-container .item {
    flex: 1 !importantt; 
    margin: 5px !important;
    text-align: center !important;
}

Thanks!