I want the mobile menu and header look exactly like desktop for dawn theme Shopify. I tried this two codes it made some what similar , but arrangement is still different.
.header__inline-menu { display: block !important; grid-column-start: 1 !important; } .header__inline-menu * { font-size: 12px !important; } header.header.header--top-left.header--mobile-left.page-width.header--has-menu.header--has-account { grid-template-columns: auto !important; } .header__icons.header__icons--localization.header-localization { grid-column: 4 !important; } header-drawer { display: none !important; } h1.header__heading { grid-column-start: 1 !important; } h1.header__heading a { padding-left: 0 !important; } .header__menu-item.list-menu__item.link.link--text.focus-inset, summary.list-menu__item { padding: 5px 15px !important; } ul.mega-menu__list.page-width { grid-template-columns: repeat(2, 1fr) !important; } /* Ensure all menu items are in a single line and mobile-friendly */ .header__inline-menu { display: flex !important; /* Display menu items in a single line */ flex-wrap: nowrap !important; /* Prevent wrapping to ensure single line */ overflow-x: auto !important; /* Enable horizontal scrolling if needed */ -webkit-overflow-scrolling: touch !important; /* Enable smooth scrolling on iOS */ } .header__inline-menu * { font-size: 10px !important; /* Adjust font size for readability */ white-space: nowrap !important; /* Prevent wrapping of text */ } /* Adjustments for mobile view */ @media (max-width: 767px) { .header__inline-menu { flex-wrap: wrap !important; /* Allow wrapping for smaller screens */ justify-content: flex-start !important; /* Align items to the start */ } .header__inline-menu * { font-size: 12px !important; /* Adjust font size for smaller screens */ alignment: single-line } }After using above code mobile menu looks like
and desktop menu looks like -
I want both to look some what like this -
Please someone help me out with this.