Elementor Full Width Navigation Menu with Images on Hover | WordPress Hamburger Popup Menu Animation
ฝัง
- เผยแพร่เมื่อ 29 ก.ย. 2024
- Today I'll show you how to design Elementor Full Width Navigation Menu with Images on Hover and make a WordPress Hamburger Popup Menu Animation.
✅Get Elementor Pro:
makedreamwebsi...
✅Get code snippet for Menu with Images:
makedreamwebsi...
✅Get this READY-MADE template on TEMPLATISH:
templatish.com...
In this tutorial, I’ll show you how you can make a cool full width navigation menu on your WordPress website. After clicking on the hamburger icon, you can see the it with the beautiful animation. And when you hover over on each items, you can also see different colors and images for each of them.
If you want, you can get this animated menu popup with image as a ready made template from my template shop. Here as a bonus, you'll get both an extra transparent header version. And both of them are supported for the container and non-container versions. But, if you don't want this full screen / full page menu templates, you can also start it from scratch.
First, you need to create a header with a logo and the hamburger icon. Then, also need to create a separate popup section with a 2 column structure. Let's add a icon list widget on the left and on the right add some images using some spacer widgets.
We have also make a close icon at the top right corner for closing it. Then, we need to add CSS and JavaScript code to make it fully functional with animation. Finally, we have make it responsive for the tablet and mobile devices.
So, that's how you can design an advanced hamburger menu for desktop in your WordPress website. If you enjoy this tutorial, don't forget to like and subscribe.
I just bought this and will be testing it in my sites, thanks so much!
You're welcome!
works super-nice on desktop and tablet...not even on mobile phone.....the burger wraps and gets full width...I couldn´t fix that. but I love this menu on desktop! thank you sooo much! maybe you can tell me what to do, to work also fine one mobile...thanks a lot, regards: Markus
I cant get it to show the pointer when hovering the hamburger icon and closing. I tried with !important, and when i check the code with developer tools, it looks correct, but it is still showing a arrow and not a pointer. I really hope some one can help me. Also can someone help me, make the menu accesible, only using keyboard and not mouse?
DO YOU KNOW THAT YOU ARE A REAL HERO?
Thank you for such a great application😇
I already have my website, how to just import this new navigation on it? thx
You can follow the instruction on the Gumroad link on the "How to Install" section.
Does it handle sub-menus?
No
@@MakeDreamWebsite Thanks!
I followed the tutorial step by step, the only issue i am having is, that the "open" and "close" button don't work properly on phones Any ideas, how to fix that?
can we use a button instead of 3 line divider.
Hello, do I need to use elementor pro?
Yes, Elementor pro is needed for this...
Great video, just what i needed for my current project. One question, can it be used in a popup instead of header template?
Then it may nit work properly… it is only made for header tempate
This is beautiful man!! Keep the videos coming, we can’t wait for more!! ❤️
Been ur fan since day 1! 👋
Thank you so much❤️
amazing video man! however, i have a problem and i hope you can help me. so when i started making this header template, there was already some stuff on my page that i couldn't get rid of. my page showed: by 'name' / 'date' then under it said 'content area' and at the very bottom 'previous template'. it seems like this somehow saved itself from when i created a blog page. how do i get rid of this from my navigation menu page and other pages where it's not needed? 😭
also, my site logo/image and my menu bar only occupy half of the page
Hi! bro i don't understand your talk about the custom css code. Why are you using these code? please guide me
Custom code is needed to make this functionality work as Elementor by default don't provide this kind of menu.
Great tutorial, is it possible to close the menu with the ESC key?
Yes, it’s possible but need to add some extra line of code…
I appreciate so much your video but i have a problem: every menu has also sub menu voice.. in this case what i have to do ?
You can use this menu only when you don't have submenus...
bro, excellent work, i have followed your tutorial throughly and i created step by step, and i have successfully created following your instructions,
but, end result is its not transparent, its having black background, i need to have transparent header, can you please suggest, regards and many many thanks
Hi, This is amazing! Thanks!
But there is one thing I can't do, and that is closing the menu on the mobile phone. Don't know where the error might be?
Hey, will this work if I have my cart in the header?
I can not make the column height full height only section height, what happens is when i make full widht and 100 height vh, it goes only for the section and not for the columns, they remain small
Hi, I just bought the template and it works great. For SEO is there any way to use a menu widget instead of the the icon list? If so, could you please advise on where I might edit to achieve this.
Many Thanks!!
Hi, was just wondering if you managed to solve the issue?
😍
I managed to complete the full screen menu but when applying to my website a header it doesnt appear on top of the content. Instead there is a blan space on top of the rest of the content, and when I open the menu It shows up there, but if I close it there is this huge blank space.
When making the menu for the menu section I didnt have the absolute position option so I guess that is the reason why, how can I solve this?
Do I need elementor pro if I buy the template?
Yes, Elementor Pro is needed for that
Thanks for your time on this amazing tutorial:)
My pleasure!
HELLO! I bought the template but on mobile it shows the white rectangle and I couldn't remove it.. I tried to remove from CSS but couldn't...
Yes, I intensionally make it so you can get contrast with all kind of images... but, if you don't want that you can go to the Icon List Widget and from it's custom CSS you can find the option, --mobile-background
Lovely man ❤
Thanks 🙏
Thank you so much, this was really helpful and detailed tutorial! This now works perfectly fine (Please ignore the earlier question). Thank you!
You're welcome!
Hello! Great content!! Thank you for the help, is it possible to help me implement the same but on a section of my website? I am trying to make the same effect but the background of the icon list section isn't changing with me
great video. i succeed to follow all the steps.
a small question please. how can i move some of the elements from the icon list so it will look like a subcategory from the one on top of it?
Great work I'm a fan. Can you do a video about Parallax effect this would be great.
Thank you for your suggestion...
Hello sir can I send one link can you make this type of website can I send a link?
You can email me that link... if you put link in the comment that will be auto deleted by TH-cam
Hi
Thank you for this fantastic tutorial :-)
How to adapt the codes to use 3 columns and alternate the column where the image appears?
First link on the left and second on the right and so on?
Thanks in advance
You can add as many columns you want. But, with these 2 columns you need to add those class as shown in the video to keep it functional...
This is awesome bro
Thank you!
and the padding doesnt solve it
Excellent content, thank you!
Very welcome!
How to connect for example home with that picture??? pls someone tell me
The 1st image will connect with 1st menu item, the 2nd image will connect with 2nd menu item, and so on...
Curious bro if I purchase does the mobile version show the related background f image for a second before taking visitor to that page? #YOUROCK!
Yes, It shows a little time before redirected to that link...
Great! 🎉📲👏🏻
my image isn't changing when I hover the icon list
You can email me your page link...
Great video as usual but i wanted to ask you something, i have use some of your custom css codes for elementor, i copy paste them just like you publish them and the effects do work but i have realize that they could have issues with plugin caches like Litespeed, also after doing these changes, when i go into editor mode the effects do not show, i see the containers in the navigator and i can edit them but i can't see them on the screen, any ideas what could it be? Greetings!
You can temporarily deactivate that cache plugin and after making all the changes again activate that. Hope that'll work!
@@MakeDreamWebsite I just want to clarify i just wanted to shared this with you, you are my favorite wordpress / elementor youtuber and i really enjoy your content, keep the good work!
Can we make this on the elementor free version too ??
As there a custom code, so you need Elementor Pro. But, if you have a plugin that support to write custom CSS for each elementor widgets then it's also possible for free...
Where are the project images, bro..?⁉❓
You can get those images from pexels
I followed the tutorial to the end, and everything works perfectly. Thank you so so much, you're the best
Very welcome!
Congratulations men, I have to upgrade wordpress for accessing header.
Excellent! Can this be done with a vertical header?
Yes, you can...
@@MakeDreamWebsite Fantastic! Thank you again for a great tutorial.
that was amazing , thank you!!
You're welcome!
U are a king
Thanks 😊
Great video😊
Can you change the background images in the spacers to videos?
No, it's only capable with images...
@@MakeDreamWebsite Thanks for the response😊
Can you make the menu close clicking on everything except the menu points and also closing it by pressing ESC?
@@michaeldamm yes, that can be done but requires some more code
@@michaeldamm yes, that can be done but requires some more code
So awesome! 🎉
Thanks a lot!
Beautiful! 🎉
Thank you! 😊
Too long
Oooo Bhai Just Awesome
Thanks...
Hi!! great tutorial!!
i have only one problem... in the transition between one "slide" and another, the first image always appears for a few seconds?? why do you think?
thanks a lot!!
only in frontend mode and not in elementor builder
I think there may be some conflict which causes that...
@@MakeDreamWebsite i noticed that is the transition effect of the css.. if i remove i don't see the "bug"
hello, thank for the great tutorial that help me a lot, how i can change in
the transition animation fade in down of the menu, doing it from the elmentor options it makes some bug.
Congratulations on your tutorials, they are excellent. You are very good at this.
There is a question I would like to ask: do these scripts affect the performance of the website in any way? or have no problem?
Once again I congratulate you for the great work you do.
Thank you so much!
You're welcome! No, they don't affect your website! Basically WordPress/Elementor already runs a bunch of of code on your website under the hood which you can't see. So, you can say adding these little code snippets are like adding a cup of water into the ocean.
@@MakeDreamWebsite Thank you very much for your answer.
I'm going to implement this tutorial tonight. Brilliant!
Thanks again!
@@augustoaguirrem You're welcome!