I want the mobile menu and header look exactly like desktop.

[Shivani3]

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.

<style>
.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;
}
</style>

<style>
/* 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
}
}
</style>

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.

[devmont-digital]

It's not possible to create the same design on mobile. You will need to remove some elements like the search bar and icons because the mobile screen doesn't have enough space to fit everything together