How to force mobile menu to remain on desktop site - v. 7.1

On 1/23/2020 at 4:54 AM, rsmith3074 said:

Did you ever have any luck with this? I'm looking to do the same thing. 

I also can't see the post from sarahnoni.

On 2/14/2020 at 7:16 AM, Marfthew said:

Hey there,

Going to preface that I am not a coder. I poke around and add custom code until I break the site, then I try to fix it to the way I like it.

The following code worked for me on my site: http://mattehue.com :

@media screen and (min-width: 1px) {
 
.header-layout-nav-right .header-nav-list {
display: none;
} 

.header-burger {
  display:flex;
}
  
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}


}

You're basically telling the browser that at all times—anytime the screen is greater than 1px wide—to hide the web nav, display the hamburger menu, then make the mobile menu visible.

Thank you. I just tweaked your code to work on my site, 7.1

Here is code

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

@laurasharp, yes you can adjust the height value to make the lines thicker

 

.burger-inner:before, .burger-inner:after {
	height: 2px;
}

Someone posted a similar question and solution here: 

Did you ever have any luck with this? I'm looking to do the same thing. 

I also can't see the post from sarahnoni.

Hey there,

Going to preface that I am not a coder. I poke around and add custom code until I break the site, then I try to fix it to the way I like it.

The following code worked for me on my site: http://mattehue.com :

@media screen and (min-width: 1px) {
 
.header-layout-nav-right .header-nav-list {
display: none;
} 

.header-burger {
  display:flex;
}
  
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}


}

You're basically telling the browser that at all times—anytime the screen is greater than 1px wide—to hide the web nav, display the hamburger menu, then make the mobile menu visible.

Does anyone know how to make the "burger" lines thicker?

@ryandejaegher Thank you!! I so appreciate it!

For those asking about Hamburger thickness —
Adding this code to Custom CSS worked for me on 7.1

*Edit height to whatever you want, default is 1px
 

.burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun {
	height: 1px;
}

On 6/12/2020 at 8:42 PM, RyanDejaegher said:

@laurasharp, yes you can adjust the height value to make the lines thicker

 

.burger-inner:before, .burger-inner:after {
	height: 2px;
}

 

This header layout is EXACTLY what I want (with a 3px) burger height. I'm having trouble with it, though. Every code I've tried causes the cart to disappear and the logo to be slightly off-center (towards the right). Any tips on how to get it like this example? Thanks.

On 7/29/2020 at 8:35 PM, robnudds said:

This header layout is EXACTLY what I want (with a 3px) burger height. I'm having trouble with it, though. Every code I've tried causes the cart to disappear and the logo to be slightly off-center (towards the right). Any tips on how to get it like this example? Thanks.

Can you share link to your site? We can check easier.

Is it possible to add a third line to the hamburger menu icon?

5 hours ago, laurasharp said:

Is it possible to add a third line to the hamburger menu icon?

Add to Home > Design > Custom CSS

/* burger 3 lines */
.burger-box .patty {
    transform: translatey(0) !important;
    height: 2px;
}