Hamburger Menu on Desktop

Site URL: https://chef-andy-wright.squarespace.com/

Hi, 

I would like to change the desktop navigation to a hamburger

Password:chefandy 

Thank you

Add to Design > Custom CSS

/* force burger on desktop */
@media screen and (min-width:992px) {
 /* 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;
}
/* menu size */
.header-menu.header-menu--folder-list {
    left: unset;
    width: 30%;
    bottom: unset;
    height: 70%;
}
}

Thank you @tuanphan

That worked great. Is it possible to have just a small dropdown menu rather than the whole screen overlay? 

On 7/25/2022 at 6:40 AM, krystenjade said:

Thank you @tuanphan

That worked great. Is it possible to have just a small dropdown menu rather than the whole screen overlay? 

 

Like this? or smaller (width + height)?

@tuanphan yes thank you. But smaller width and height if possible. 

9 hours ago, krystenjade said:

@tuanphan yes thank you. But smaller width and height if possible. 

Updated above code. You can check it again.

Thank you. That worked.