- This topic has 9 replies, 4 voices, and was last updated 3 years, 9 months ago by Tom.
-
AuthorPosts
-
August 5, 2019 at 2:06 am #975888Alexander
Thank you for creating this awesome theme!
I am trying to implement the spinning hamburger from https://jonsuh.com/hamburgers on my site. I did a search on the forums and stumbled across a few support requests related to this topic, however i failed to get any of the proposed solutions to work.
I am using a child theme with the latest versions of GP and GP Premium with the SVG icons setting.
How do i hide the default hamburger and make the alternative one work?CSS:
@media only screen and (max-width: 1023px) { /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } }
August 5, 2019 at 9:05 am #976278TomLead DeveloperLead DeveloperHi there,
The first thing to do is hook the required HTML into the mobile toggle.
1. Create a new Hook:
2. If you’re using the regular menu, set the hook asgenerate_inside_mobile_menu
. If you’re using the Mobile Header, set the hook as “Custom Hook” and paste this hook:generate_inside_mobile_header_menu
3. Add your required HTML:<div class="hamburger hamburger--spin"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div>
4. Set the Display Rules to the entire site.
Now let’s add the CSS:
@media only screen and (max-width: 1023px) { /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 15px 15px; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.7; } .hamburger.is-active:hover { opacity: 0.7; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #000; } .hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -2px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 40px; height: 4px; background-color: #000; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .toggled .hamburger--spin .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .toggled .hamburger--spin .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .toggled .hamburger--spin .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } } /* GP specific */ .hamburger { padding: 0; } .menu-toggle .gp-icon, .menu-toggle:before { display: none; } .hamburger-box { width: 20px; height: 16px; top: 3px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 20px; height: 1px; background-color: #fff; } .hamburger-inner::before { top: -5px; } .hamburger-inner::after { bottom: -5px; }
August 5, 2019 at 9:42 am #976307AlexanderHello Tom,
your solution worked like a charm with the custom hook! Thank you very much for the outstanding support!
Regards,
AlexanderAugust 5, 2019 at 5:30 pm #976619TomLead DeveloperLead DeveloperGlad I could help π
June 11, 2020 at 1:15 pm #1324198YaroslavIt works for me as well, but how to change the size of the hamburger?
June 11, 2020 at 4:00 pm #1324316LeoStaffCustomer SupportCan you link me to the page in question?
Feel free to open a new topic so you can use the private URL field.
July 1, 2020 at 3:28 am #1347938DavideHi, thanks for the code & instructions for the spinning burger menu.
I am, like Yaroslav, looking for a way to make the burger (and the X) bigger (also: why once you click on the menu and then close it the “lines” are thinner than before?) and increase the space between the “lines”.here’s the link
thank you!
DavideJuly 1, 2020 at 10:00 am #1348564TomLead DeveloperLead DeveloperHi there,
We actually have an updated doc article on this here: https://docs.generatepress.com/article/animated-hamburgers/
Then you can use the
transform: scale(x)
property to change the size.July 2, 2020 at 4:46 am #1349267DavidePerfect, thanks Tom!
just a note (is not specified in the link you posted): don’t remember to change the class of the desired effect in the part of code below (unlike I did π π )function tu_add_animated_hamburger_markup() { ?> <div class="hamburger hamburger--collapse"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div> <?php }
July 2, 2020 at 9:33 am #1349709TomLead DeveloperLead DeveloperGlad it helped! π
-
AuthorPosts
- You must be logged in to reply to this topic.