Megamenu Issues ( Shopify Dawn Theme )

Store Design
, , , , , , , ,

Topic summary

A user customized a megamenu with images in Shopify’s Dawn theme but encountered layout issues requiring CSS adjustments.

Initial Problems:

  • Images not displaying in a single horizontal line on desktop
  • Text labels wrapping to two lines instead of one
  • Excessive spacing between images and text labels

Solution Process:
Another user provided iterative CSS fixes targeting the megamenu’s flexbox layout:

  • Applied flex-wrap: nowrap to force single-line image display on desktop
  • Set fixed flex-basis (140px) to create consistent spacing between images
  • Adjusted margin-top to reduce gap between images and text
  • Added font styling (1.17rem, bold) for desktop text labels

Current Status:
The desktop layout appears resolved. A remaining issue exists in mobile view where spacing between images and text is reportedly too large, though the most recent CSS update addressed text styling and may have partially resolved this concern. The discussion shows ongoing refinement through code snippets and screenshot comparisons.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
4

let replace with this css:

@media (min-width: 768px) {
  #Details-HeaderMenu-6 .mega-menu__list {
    flex-wrap: nowrap;
  }
  #Details-HeaderMenu-6 .mega-menu__list > li {
    flex: 0 0 140px;
  }
}
#Details-HeaderMenu-6 .mega_menu_img .title {
  height: auto;
  margin-top: 10px;
  width: auto;
  border-radius: unset;
}