Shopify themes, liquid, logos, and UX
I've managed to place the mega menu list into columns, but the condensed list I can't. When it does go into columns, it messes up the menu list and vice versa. Themes not live yet.
Image of menu list in columns:
my condensed list not in columns:
this is the component mega menu code:
.mega-menu { position: static; } .mega-menu__content { background-color: rgb(var(--color-background)); border-left: 0; border-radius: 0; border-right: 0; left: 0; overflow-y: auto; padding-bottom: 3rem; padding-top: 3rem; position: absolute; right: 0; top: 100%; } .shopify-section-header-sticky .mega-menu__content { max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem); } .header-wrapper--border-bottom .mega-menu__content { border-top: 0; } .js .mega-menu__content { opacity: 0; transform: translateY(-1.5rem); } .mega-menu[open] .mega-menu__content { opacity: 1; transform: translateY(0); } .mega-menu__list { display: grid; gap: 1.8rem 4rem; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; } .mega-menu__link { color: rgba(var(--color-foreground), 0.75); display: block; line-height: calc(1 + 0.3 / var(--font-body-scale)); padding-bottom: 0.6rem; padding-top: 0.6rem; text-decoration: none; transition: text-decoration var(--duration-short) ease; word-wrap: break-word; } .mega-menu__link--level-2 { font-weight: 550; letter-spacing: 3px; font-size: 14px !important; } .header--top-center .mega-menu__list { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 0; } .header--top-center .mega-menu__list > li { width: 16%; padding-right: 2.4rem; } .mega-menu__link:hover, .mega-menu__link--active { color: rgb(var(--color-foreground)); text-decoration: none !important; } .mega-menu__link--active:hover { text-decoration-thickness: 0.2rem; } .mega-menu .mega-menu__list--condensed { display: block; color: #042d45 !important; } .mega-menu__list--condensed .mega-menu__link { font-weight: normal; }
Which theme do you are using on your store? Is it Dawn Theme?
Do you have choose Mega Menu type for the condensed list?
yes Dawn Theme and its set on mega menu
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025