How can I display the hamburger menu on both mobile and desktop in Maker theme?

Store Design
1

I’d like the hamburger menu to be displayed on both mobile and desktop. Could someone advise how this can be achieved please? Domain is struckbylashes.com.

Thank you!

2

Hello @StruckByLashes ,

Find this css and comment/remove ‘display: none;’

.header--left-side [data-off-canvas--open=left-sidebar] {
    display: none;
}

Not sure where it is but may be in theme.liquid or header.liquid.
Once you do it after that add this css in bottom of theme–critical.css , You can find this file under assets.

.header--left-side [data-off-canvas--open=left-sidebar] {
    float: left;
}

Thanks

3

@StruckByLashes

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme–critical.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.header--left-side [data-off-canvas--open=left-sidebar] {
    display: inline-block;
}
ul.x-menu--level-1--container {
    opacity: 0;
    visibility: hidden;
}
4

hello @StruckByLashes

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 768px){
.header--left-side [data-off-canvas--open=left-sidebar] {
    display: none;
}
}
5

Thank you very much all!

Both solutions worked great! :slightly_smiling_face: If I wanted to have the navigation sub-menus collapsible could you advise how I could do this please? Example store here: doseoflashes.com

Thank you very much! :slightly_smiling_face:

6

I am missing my main menu in the DEBUT template. I tried many solutions from the community but none seems to work. the site is www.hairbyus.net

7

@rozay135

try this code your menu

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media only screen and (min-width: 750px) {
nav#AccessibleNav {
    display: table-cell !important;
}
}