How to change menu to hamburger style for desktop

Technical Q&A
, ,
1

Hi everyone, i hope someone can help me in this issue. I want to change the menu for desktop view to hamburger just like mobile view.

2

Yes, you can do that, but Shopify doesn’t have a built-in setting for it, you will need a small code tweak.

Basically, you hide the desktop menu and show the mobile (hamburger) menu on larger screens using CSS + a bit of theme editing.

Quick question so I help you to fix it properly:
Which theme are you using (e.g. Dawn or something else)?

3

I use old themes like Horizon or Vessel

6

Hey @veluxe1 For Shopify Horizon theme, you can usually do it with CSS by forcing the mobile hamburger to show on desktop and hiding the normal desktop menu.

Try adding this in Customize → Theme settings → Custom CSS or in your theme CSS file:

@media screen and (min-width: 990px) {
header-drawer {
display: block !important;
}

.header__inline-menu {
display: none !important;
}
}

11

Nice sir! It works, really appreciate your help sir. But one thing more is the logo on the homepage is not centred (for desktop)

12

I have updated my code and also the result screenshot as well, remove the previous code and add this updated code above.

Cheers,
Moeed

13

Thankyou so much brodie, have a nice weekend!

14

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.