Jonsuh Hamburger menu

Site URL: https://www.warnermedia.com

Hi all,

Hope you are all well. 

Recently or a few years ago WarnerMedia Used the Hamburgers menu from Jonsuh and I love that hamburgers menu! and im wanting to get that Hamburgers menu on to my site. Jonsuh has allready uploaded the files onto github, Any help would be appreciated.

My Squarespace Site is: https://www.ztfmedia.co.uk

7 hours ago, ZFarnworth2019 said:

Site URL: https://www.warnermedia.com

Hi all,

Hope you are all well. 

Recently or a few years ago WarnerMedia Used the Hamburgers menu from Jonsuh and I love that hamburgers menu! and im wanting to get that Hamburgers menu on to my site. Jonsuh has allready uploaded the files onto github, Any help would be appreciated.

My Squarespace Site is: https://www.ztfmedia.co.uk

They used spring style menu, I think this is a good start to replicate the animation, add this into Design->Custom CSS
 

.burger-inner div {
	display: none !important;
}
.header-burger-btn .burger-inner:after, .header-burger-btn .burger-inner:before {
    transition-property: all;
    transition-duration: 0.25s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.10s;
    width: 18px;
    height: 3px;
    border-radius: 30px;
    background-color: #fff;
}
.header-burger-btn .burger-inner:after, 
.header-burger-btn .burger-inner:before {
    display: block;
    content: '';
}

.header-burger-btn .burger-inner, 
.header-burger-btn .burger-inner:after, 
.header-burger-btn .burger-inner:before {
    position: absolute;
    width: 40px;
    height: 4px;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform,-webkit-transform;
    border-radius: 4px;
    background-color: #000;
}

.header-burger-btn.burger--active .burger-inner, 
.header-burger-btn.burger--active .burger-inner:after, 
.header-burger-btn.burger--active .burger-inner:before {
	background-color: #fac824;
}

.header-burger-btn .burger-inner {
    top: 2px;
    transition: background-color 0s linear .13s
}

.header-burger-btn .burger-inner:before {
    top: 10px;
    transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}

.header-burger-btn .burger-inner:after {
    top: 20px;
    transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}

.header-burger-btn.burger--active .burger-inner {
    transition-delay: .22s;
    background-color: transparent!important
}

.header-burger-btn.burger--active .burger-inner:before {
    top: 0;
    transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
    transform: translate3d(0,7px,0) rotate(45deg)
}

.header-burger-btn.burger--active .burger-inner:after {
    top: 0;
    transition: top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;
    transform: translate3d(0,7px,0) rotate(-45deg)
}

.header-burger-btn-r .burger-inner {
    top: auto;
    bottom: 0;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .13s
}

.header-burger-btn-r .burger-inner:after {
    top: -20px;
    transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear
}

.header-burger-btn-r .burger-inner:before {
    transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}

.header-burger-btn-r.burger--active .burger-inner {
    transition-delay: .22s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: translate3d(0,-10px,0) rotate(-45deg)
}

.header-burger-btn-r.burger--active .burger-inner:after {
    top: 0;
    transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;
    opacity: 0
}

.header-burger-btn-r.burger--active .burger-inner:before {
    top: 0;
    transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
    transform: rotate(90deg)
}

Thank you so much mate! 

Zak

Ive added it to where you have said but it has not applied it.

work well here

Take screen of the custom css panel, do you see any warning/issues

On 4/10/2021 at 3:30 PM, ZFarnworth2019 said:

Ive added it to where you have said but it has not applied it.

try this tool to pickup which effect suits you

[Free Share] Custom Hamburger Animation - Coding and Customization - Squarespace Forum

On 5/4/2021 at 4:35 PM, bangank36 said:

try this tool to pickup which effect suits you

[Free Share] Custom Hamburger Animation - Coding and Customization - Squarespace Forum

Hi @bangank36 - I tried to add this to my Brine template website under Design > Custom CSS, and it doesn't seem to be active on either mobile, or desktop. Are you able to help?

URL > https://begonia-cyan-wpr4.squarespace.com/

Pass > Access21

Thanks!

@capturecollect I think above tool for burger in SS 7.1. Which effect do you try to apply?