How can I add a hamburger menu on desktop using the Craft theme?

Store Design
1

Hi There! I have seen many posts about this but would like to know what code editing is required to make this change on the Craft theme.

My site is https://jula-cole-design.myshopify.com/

Thanks!!

2

@casht

yes, please confirm this look

KetanKumar_0-1660622941894.png
KetanKumar_0-1660622941894.png1920×1080 391 KB

3

@KetanKumar Exactly! Would you mind sharing instructions?

4

@casht

Please add the following CSS code to your assets/base.css bottom of the file.

@media screen and (min-width: 990px){
.header--top-center .header__inline-menu {display: none !important;}
.header:not(.header--top-center) *>.header__search, .header--top-center>.header__search {display: none !important;}
.header:not(.header--top-center)>.header__search, .header--top-center *>.header__search {display: block !important;}
}

Thanks!

5

@casht

Thanks for confirm please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (min-width: 990px) {
details-modal.header__search {display:block !important;}    
.header--top-center>.header__search {
    display: none !important;
}
header-drawer {
    display: inline-block;
}
nav.header__inline-menu {
    display: none;
}    
}
6

@KetanKumar @dmwwebartisan I tried both solutions above and I am not getting a menu now and still no hamburger menu.

Here is the preview link:

https://2a27s4mj3x3m7f23-58174734370.shopifypreview.com

7

@casht

Try my new solution.

@media screen and (min-width: 990px){
.header--top-center .header__inline-menu {display: none !important;}
.header:not(.header--top-center) *>.header__search, .header--top-center>.header__search {
    display: none !important;
}
.header:not(.header--top-center)>.header__search, .header--top-center *>.header__search {
    display: block !important;
}
header-drawer {
    display: block !important;
}
}

Thanks!

8

@casht

Remove previous code and add this new code

@media screen and (min-width: 990px){
.header--top-center .header__inline-menu {display: none !important;}
.header:not(.header--top-center) *>.header__search, .header--top-center>.header__search {
    display: none !important;
}
.header:not(.header--top-center)>.header__search, .header--top-center *>.header__search {
    display: block !important;
}
header-drawer {
    display: block !important;
}
}

Thanks!

9

Hi! This only added the hamburger to my site but didn’t remove the menu navigation. How do keep hamburger only? I’m using Studio theme. Thanks!

10

@dlynaustin

Please share your store URL!

Thanks!

11

I was able to remove header navigation and add hamburger on the right on Desktop but now I’m looking to move the hamburger to the right on MOBILE only. Is this possible? Also, wondering if the hamburger can be moved more to the right hand side so the width is the same as on both sides of the page?

assifassefi.com pw skawst

Thank you!!

12

Another question - is it possible to move the hambuger below the logo on the left side? That may be a better option. And is there a way to make the dropdown box smaller?

Thank you!

www.assifassefi.com pw skawst

13

Another question - is it possible to move the hamburger below the logo on the left side? That may be a better option. And is there a way to make the dropdown box smaller?

Thank you!

www.assifassefi.com pw skawst

14

Hello! I am having a problem with my menu on the theme craft as well. When I am in customization mode desktop, the menu appears as a hamburger menu but then in the viewing mode/ widescreen the menu appears in the middle as a list.

my site is www.thelittleatelier.store

Your help would be greatly appreciated- thank you!