Change Hamburger Icon Elementor Pro ANIMATED

Подписаться 26 тыс.

Просмотров 19 тыс.

50% 1

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

Опубликовано:

4 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@Pedant_Patrol 2 года назад

Putting in my request for that tutorial on the scrolling icon. Great work as always!

@KayCinho 2 года назад

Added :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vXgF0ukO4rI.html

@Pedant_Patrol 2 года назад

@@KayCinho- Awesome, dude! Will add it to my watch later list now! Cheers for the excellent content!

@kurangan9191 2 года назад

there's so much value in your content. i wish you will hit a million sub soon .. thanks a ton kaycinho

@KayCinho 2 года назад

I appreciate that! Thank you so much!

@arasparashpar5468 Год назад

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! :)

@AllanManzano-t1y Год назад

can you take an screenshot?

@AllanManzano-t1y Год назад

I already put it but it' didn't work in my end.

@mohamedaslam7809 2 года назад

Man you’re so underrated Keep doing what you’re doing now One day you’ll have millions of subscribers. Luvya

@brunnomartins 2 года назад

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!!

@antonichristian5845 2 года назад

in the part where you entered 9999 under CSS ID shouldn't that be in z-index instead?

@zT4_J2_S0z 2 года назад

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!

@KayCinho 2 года назад

Wow! Thank you for the kind words. You're very welcome! Here's the tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vXgF0ukO4rI.html

@learabatel3569 2 года назад

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.

@stuartibbotson7179 Год назад

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

@susangemayel-tapper3794 2 года назад

Fabulous tutorial, thank you.

@miguelrf7949 2 года назад

It doesn't work for me, I followed your video along but I can't make it work.

@lennard3100 Год назад

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

@iamalifawad 2 года назад

But it is bad for SEO. It can't display Schema Markup in Google 🥺

@KayCinho 2 года назад

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.

@LionDesign 2 года назад

I would love to chat, I love your tutorials and would like to ask some questions about css and js in elementor pro

@KayCinho 2 года назад

Thanks Lion Design! What do you struggle with?

@justingallant1560 2 года назад

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?

@shahrilsuhaimi5109 2 года назад

Yeah, it's happen to me too

@stuartibbotson7179 Год назад

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

@jamesgregoryseo Год назад

Ask chatgpt

@lordwiseburay8035 2 года назад

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

@jelliedfrogs 2 месяца назад

What is .fullscreen-nav actually referring to? Where is this class within the HTML?

@AllanManzano-t1y Год назад

Hi, My end didn't work. the close button did not appear.

@matthewgilroy3326 Год назад

That website is gorgeous, do you have a video on designing it?

@tayyib4tech 2 года назад

Amazing

@KayCinho 2 года назад

Thank you! Cheers!

@davidsantiagopaucar9894 11 месяцев назад

Very good

@danielkarcz56 Год назад

Hi i followed your tutorial but when i click the icon ti changes but nothing happens no popup will open

@gautamgiri2921 2 года назад

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

@robvogelsang 9 месяцев назад

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.

@TheOne-rc4yv 2 года назад

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 :)

@MarnixTeensma 2 года назад

how did u do this?

@TheOne-rc4yv 2 года назад

@@MarnixTeensma the z-index value?

@MarnixTeensma 2 года назад

@@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?

@steff_epix 2 года назад

@@MarnixTeensma just above the ID field

@brunnomartins 2 года назад

Worked! Thanks.

@mariacamilacalvosalazar4256 Год назад

Close button does not really appear on top of the popup menu

@medialiondigitalmarketinga2984 Год назад

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

@vincekhoo7389 Год назад

How Can I change the hamburger Icon? I have my own icon style

@alliefabrizio5395 2 года назад

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!

@stevoe97 2 года назад

Me too, hoping he responds with a solution because I can't figure it out. Don't suppose you found a solution?

@Gb-zi1nh 2 года назад

@Allie Fabrizio change the z-index on your section of your header

@Webrisernl Год назад

can I also show menu?

@markowakeup 2 года назад

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 :)

@KayCinho 2 года назад

You're welcome Marco! Regarding your issue, it's really hard to say without access. But it should be fixable with CSS.

@simeonnenov3499 2 года назад

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!

@TheOne-rc4yv 2 года назад

Did you disable the close button on the popup itself? Popup gear icon?

@simeonnenov3499 2 года назад

@@TheOne-rc4yv How can I disable it and use the one from this video instead?

@ramonbrotzer7086 2 года назад

@@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.

@simeonnenov3499 2 года назад

@@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!

@Gb-zi1nh 2 года назад

Change the Z-index on the section of your header