mobile dropdown removal

Store Design

Topic summary

A user wants to remove the mobile dropdown (hamburger) menu on their Shopify store and keep the navigation static like the desktop version.

Community Response:

  • The Publisher theme doesn’t have this feature built-in, requiring custom code
  • Multiple users caution that the hamburger menu is an industry-standard mobile pattern that users expect
  • Making the full menu static on mobile could result in a non-user-friendly, squeezed layout on smaller screens

Solution Provided:
A CSS code snippet was shared to implement this change by modifying the base.css file in the theme’s Assets folder. The code uses media queries to adjust the header layout and display properties for screens under 989px width.

Status: Technical solution offered, though concerns about mobile UX best practices were raised.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I was seeking help or direction in being able to removing the dropdown feature for mobile view. I want to keep it static like the desktop version. Is there a way to reach that direction? I have the achieved effect on desktop but not mobile.

link for web preview - https://2coq17paf3c558hv-79080456483.shopifypreview.com

Thank you

1 Like
2

Hi @setsxs , unfortunately this is not built in to the Publisher theme you are using. A custom code solution is still possible, of course, but keep in mind that the mobile navigation you are seeing is pretty industry standard so users are very used to looking for that mobile menu icon to find links.

3

Hi @setsxs

Do you mean the hamburger menu?

Made4uoRibe_0-1725923963120.png
Made4uoRibe_0-1725923963120.png158×118 4.38 KB

You might end up with a menu that’s not user-friendly and could be squeezed on smaller screens. This is possible to fix, but it would require a developer.

4

Hi @setsxs ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 989px) {
.header-wrapper .header {
    grid-template-areas:
        "left-icons heading icons"
        "navigation navigation navigation";
}
    header-drawer {
        display: none;
    }
.header--top-center>.header__search {
        display: inline-flex;
    }
.header__inline-menu {
        display: block;
    }
.header--top-center *>.header__search {
        display: none;
    }
}