Change Hamburger Icon Elementor Pro ANIMATED
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- Change Hamburger Icon Elementor Pro. Get Elementor Pro: kaycinho.com/e... (affiliate) - This is V2 :)
In a previous tutorial I showed you how to add an animated hamburger icon using a Lottie file but in this one, there is an even easier way, as long as you can copy and paste some code that you'll find in the companion blog post (link below).
CODE (BLOG POST)
kaycinho.com/c...
TUTORIAL MENTIONED:
- BG Shifting Fullscreen Menu: • Full Screen Menu Eleme...
TOOLS I LOVE:
- Elementor Pro (affiliate): kaycinho.com/e...
- Astra Pro (affiliate): kaycinho.com/a...
- Crocoblock (affiliate): kaycinho.com/c...
- Wirementor (my own tool): kaycinho.com/w...
MORE LINKS:
- Wirementor demo (built by me): kaycinho.com/w...
- A2 Hosting (affiliate): kaycinho.com/a...
ONE PAGE WEBSITE FREE COURSE
• Elementor Pro Tutorial...
GET MY HELP:
kaycinho.com/s...
ALL MY RECOMMENDED RESOURCES:
kaycinho.com/r...
DOWNLOAD MY FREE BRAND GUIDELINES TEMPLATE
kaycinho.com/b...
DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
Also, I am the creator of Wirementor.
#webdesign #freelancing #elementor
Putting in my request for that tutorial on the scrolling icon. Great work as always!
Added :) th-cam.com/video/vXgF0ukO4rI/w-d-xo.html
@@KayCinho- Awesome, dude! Will add it to my watch later list now! Cheers for the excellent content!
in the part where you entered 9999 under CSS ID shouldn't that be in z-index instead?
Has anybody found a work around for the hamburger menu issue showing below the pop up window.
1 I have changed the Z index so the menu icon is 9999 at the top and gone over everything and it doesn't work kaycinho can you double check this issue please
It doesn't work for me, I followed your video along but I can't make it work.
I have elementor pro and downloaded the Popup trigger uRl plugin but it doesnt show up in my popup templates? Any fixes? Or can you give me another plugin
Hi, a very nice tutorial to animate the hamburger icon in elementor pro! However the link to get the HTML and CSS code doesn't work (for me). After clicking a message pops up: "There was a problem installing the plugin". No idea why that is and what I can do to fix it. Anybody knows? Please let me know.
Very good
When i use 9999 for the CSS ID of the animated icon, the popup opens but the close button disappears, when i use 9999 as a Z-index of the icon then it works :)
how did u do this?
@@MarnixTeensma the z-index value?
@@TheOne-rc4yv Yes please show me how you did this solution, because i have the same problem in which the popup does open, but the close button of the html wont show. where can i find the Z index of the icon?
@@MarnixTeensma just above the ID field
Worked! Thanks.
I would love to chat, I love your tutorials and would like to ask some questions about css and js in elementor pro
Thanks Lion Design! What do you struggle with?
What is .fullscreen-nav actually referring to? Where is this class within the HTML?
This is a great tutorial, but when you open the pop-up from the html burger menu, the X symbol does not appear. There is no way to close the pop-up. Can you explain how?
Yeah, it's happen to me too
This happens also to me its great video but cant get it to show the nav bar on pop up .... tried and redone the video 4 times as thought i was missing something ....arrrrrrrr
Ask chatgpt
But it is bad for SEO. It can't display Schema Markup in Google 🥺
There is much more to SEO than that. I've been speaking to an SEO expert about the matter, and hopefully I will create a video about it, if he agrees to come on video.
Hi Kaycinho,
Is it also possible to get the animated hamburger icon without a popup menu? I know that pop menus aren't good for SEO
Hi, My end didn't work. the close button did not appear.
This video and other content from you has helped me really shine since purchasing Elementor a year ago, I have not found myself needing more from other tutorials as yours are so in depth and helpful. I can’t Thankyou enough for this help and I have so much appreciation for your work.
The scroll animation looks really cool, would this work for example within slider revolution where I have an arrow animation but it is not as aesthetic as the one you have created. A tutorial on this would be very helpful!
Wow! Thank you for the kind words. You're very welcome! Here's the tutorial: th-cam.com/video/vXgF0ukO4rI/w-d-xo.html
Amazing tutorial, tahnk you ! I don't know how to hide the logo when the pop-up is on... in your video, only the burger icon is visible, but in my case, the logo is visible too, andI don't known how to hide it.
BRAVO! Excellent video and explanation.
I'd like to know how to change the color when hover both icons, hamburger menu and close icon.
Thank you!!
For those who cant get the close hamburger icon on top of the popup. You're missing the first code in custom CSS on your popup:
selector {z-index:9998!important}
Just add this code to your popup, then on your header section add 9999 to z-index. Also do this for the objects (the html code for hamburger) just to be safe.
It worked for me! :)
can you take an screenshot?
I already put it but it' didn't work in my end.
Hi Kay Cinho,
I want to thank you for all the great content and tutorials out there! On your video " Full Screen Menu Elementor Pro (background shifting!!)" I encountered an issue, when copy pasting the image source URL, the image does not appear to cover the screen even though my images are the same dimension as yours (2560 x 1440 px). Is there a way to fix this? Please let me know :)
You're welcome Marco! Regarding your issue, it's really hard to say without access. But it should be fixable with CSS.
I am also having difficulty with that "X" not showing in the pop up. tried different values of z-index, turned on and off the original "X," but to no avail. If anyone solves this mystery please post!
Me too, hoping he responds with a solution because I can't figure it out. Don't suppose you found a solution?
@Allie Fabrizio change the z-index on your section of your header
Hey man, im having a small error come up, i can not get the toggle button to stay on top when the pop up opens and have done everything youve said in the video :( any chane you could do a quick zoom call!? :P
Everything is done,
But after popup open, it shows weird space between header and popup when I scroll.
I am not fluent in English hope you understand problem
Hello Kay! Great content! I just want to ask about a problem I have. I applied everything from your tutorial about the Full screen Menu (background shifting) and after that I applied everything from this tutorial. However when I click on the icon to open the menu, the pop up opens and the original "X" icon appears, instead of the one from the animation! Could you please help!
Did you disable the close button on the popup itself? Popup gear icon?
@@TheOne-rc4yv How can I disable it and use the one from this video instead?
@@simeonnenov3499 hei :) you can disable the close button of the popup via the popup settings. you can find them by clicking on the arrow right next to the navigator symbol at the bottom left of the menu.
unfortunately, I have not yet been able to figure out how to make the close button of the video visible either.
@@ramonbrotzer7086 Thank you very much!!! I forgot that the pop up has its own settings too. I thought that the Close button comes from the HTML somewhere... I appreciate it!
Change the Z-index on the section of your header
Hi i followed your tutorial but when i click the icon ti changes but nothing happens no popup will open
Man you’re so underrated
Keep doing what you’re doing now
One day you’ll have millions of subscribers.
Luvya
there's so much value in your content. i wish you will hit a million sub soon .. thanks a ton kaycinho
I appreciate that! Thank you so much!
How Can I change the hamburger Icon? I have my own icon style
That website is gorgeous, do you have a video on designing it?
Close button does not really appear on top of the popup menu
Amazing
Thank you! Cheers!
Hey, i know it's hard to measure, but how much would you say this channel helped you in getting new clients?
You mean my channel? Not web design clients, but new consulting clients (other web designers) :)
@@KayCinho interesting, thanks
can I also show menu?
Fabulous tutorial, thank you.
Qual marca da sua câmera?