Quick question Cracka: When the page is scrolled up and then the toggle is triggered, the menu has scrolled up with the page and doesn't display. Does this happen to you or do I have something not set correctly?
Good stuff! I like the hamburger icon made via pseudo-elements. FYI I think you could set the menu wrapper to auto height. You could animate it via setting max-height to 0 when it's not active. You may need to add a value (like max-height: 100vh) to the active class.
I'm playing around with it and max-height has its own issues. Could go either way, just an option if the content is variable in height due to responsive text, etc.
@@jolmstead91 I think max-height works fine as you suggested. Just remember to set the transition property to max-height, not height. set the max-height to a large value in px e.g. 1000px for the active class. This worked fine in my test.
I used the same hamburger toggle with pseudo elements but the other one from the push-down, where actually only the before/after are visible. My struggle is how to give the lines a border radius? I tried setting a 50% border radius but that results in an ellips form, or setting it to a lesser percentage or even pixels gives a deformed result.
Hello, first i would like to thank you for this awesome tutorial. Second, i want to ask for help. I put a search form inside the menu, the problem is when i click on the search form to type something, the menu will close. Anyone can help me?
Is it possible to create a 3 line hamburger icon and still have the cross icon functionality?
Great tutorial! Clear explanations and easy to follow along. Thanks for breaking down the steps so well,
Excellent video! A few simple modification for the site I'm using it on and it's perfect. Thanks Cracka!!
Always impressive, well done Udoro !
Another great tutorial come out!👌
Quick question Cracka: When the page is scrolled up and then the toggle is triggered, the menu has scrolled up with the page and doesn't display. Does this happen to you or do I have something not set correctly?
Good stuff! I like the hamburger icon made via pseudo-elements.
FYI I think you could set the menu wrapper to auto height. You could animate it via setting max-height to 0 when it's not active. You may need to add a value (like max-height: 100vh) to the active class.
I'm playing around with it and max-height has its own issues. Could go either way, just an option if the content is variable in height due to responsive text, etc.
@@jolmstead91 I think max-height works fine as you suggested. Just remember to set the transition property to max-height, not height. set the max-height to a large value in px e.g. 1000px for the active class. This worked fine in my test.
Another great tutorial as always. Keep up the great work 😎
Great ! just one question , is there any Accessibility Features is this menu ? looking for one
cheers
What exactly are you looking for?
Would this be accessibility friendly? (proper aria labels, keyboard focus on icon and each menu element etc?)
I didn't cover accessibility in this video, but it's possible.
I used the same hamburger toggle with pseudo elements but the other one from the push-down, where actually only the before/after are visible. My struggle is how to give the lines a border radius? I tried setting a 50% border radius but that results in an ellips form, or setting it to a lesser percentage or even pixels gives a deformed result.
use 50vw
@@DesignwithCracka Thanks! That would have never occurred to me!!
Hello, first i would like to thank you for this awesome tutorial. Second, i want to ask for help. I put a search form inside the menu, the problem is when i click on the search form to type something, the menu will close. Anyone can help me?