How to change the mobile menu bar aesthetic?

Store Design
,

Topic summary

A user seeks to modify their Shopify store’s mobile menu bar to display navigation items horizontally below the logo instead of using the default hamburger menu.

Initial Attempts:

  • First solution provided CSS code to show the inline menu and hide the hamburger drawer, but resulted in misaligned elements.

Working Solution:
A two-part CSS code was provided:

  1. First code restructures the header grid layout to display navigation items horizontally and hides the hamburger menu while showing account icons.
  2. Second code fine-tunes spacing by adjusting logo position (moving it left) and reducing vertical gaps between logo and menu items.

Implementation:

  • Both CSS snippets should be added to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS.
  • User initially reported the second code didn’t work, but after re-applying both codes correctly, confirmed the solution was successful.

Status: Resolved. The mobile header now displays the logo with navigation menu items positioned horizontally beneath it.

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

How do I make the mobile menu bar like that on the right?

samueljoonjung_0-1740959312057.png
samueljoonjung_0-1740959312057.png219×400 23.3 KB

samueljoonjung_1-1740959318763.jpeg
samueljoonjung_1-1740959318763.jpeg184×398 7.51 KB

2

Hi @samueljoonjung ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (max-width: 768px){
.header__inline-menu {
    margin-left: -1.2rem;
    grid-area: navigation;
    display: block !important;
    /* width: 100%; */
    position: absolute !important;
    top: 64px;
}

header-drawer {
    display: none !important;
}
}
3

HI @samueljoonjung

Thank you for reaching out to the Shopify community. I’d be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

4

My URL is www.whoglobal.shop

5

It didn’t exactly work. This is what that looks like:

samueljoonjung_0-1740970434157.png
samueljoonjung_0-1740970434157.png971×1445 80.9 KB

6

Hi @samueljoonjung

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
header.header {
    grid-template-areas:
        "heading . icons"
        "navigation navigation navigation" !important;
}
header.header > header-drawer {
    display: none !important;
}
a.header__icon.header__icon--account {
    display: block !important;
}
nav.header__inline-menu {
    display: block !important;
}
a.header__heading-link {
    padding-left: 0 !important;
}
}

Here is the result:

image_480.png
image_480.png296×480 33.9 KB

I hope this helps

Best,

Daisy

7

That’s better but it’s not neat. Can you make it so that the logo is more to the left. And for the header to be smaller vertically so that the logo and the menu items (products, stories) are closer to the logo.

8

Hi @samueljoonjung

Here is the code for the logo to move to the left and the menu closer to the logo.

@media screen and (max-width: 768px){
.header__heading-logo-wrapper img {
    margin-left: -20px !important;
}
a.header__heading-link {
    padding-bottom: 0 !important;
}
nav.header__inline-menu {
    margin-top: -12px !important;
}
}
9

That didn’t really do anything

10

Hi @samueljoonjung

Have you added both codes?

11

Yes. When I did, it didn’t work.

12

Hi @samueljoonjung

https://www.loom.com/share/98adeeedd57b44cfa7f9b33e776dac54

Here is the video I applied the 2 codes, and it worked like the picture I sent you.

Can you re-add the code, save it and send me a picture of where you added the code
I will check it for you

13

Thanks Daisy, sorry I must have done something wrong but it works!