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. 

I have inserted the code from above, but when I go one page further in the menu, for example in the menu on products ... then the menu moves to the left and you see it on the page? 

I have two pictures, I think they explain it better than I do, I hope you can help me. 

2 minutes ago, Pylone_mov said:

I have inserted the code from above, but when I go one page further in the menu, for example in the menu on products ... then the menu moves to the left and you see it on the page? 

and there is also this white line for scrolling as soon as i go to the next page in the menu, you can see it in the second picture in the middle. 

2 minutes ago, Pylone_mov said:

I have two pictures, I think they explain it better than I do, I hope you can help me. 

On 5/6/2023 at 9:09 PM, Pylone_mov said:

 

 

What is your site url? We can check easier

On 5/9/2023 at 9:49 AM, tuanphan said:

What is your site url? We can check easier

https://mandarin-ferret-jpca.squarespace.com/

is this the right url? 

On 5/10/2023 at 8:01 PM, Pylone_mov said:

https://mandarin-ferret-jpca.squarespace.com/

is this the right url? 

Your site is private

6 hours ago, tuanphan said:

Your site is private

 

i changed the settings like the guide you send me. the pw is: 12345678

Don't remove any code in your current code. Add this to Design > Custom CSS

@media screen and (min-width:992px) {
.header-menu-nav-folder--open {
    visibility: hidden;
}
}