Really great video! I would love to see how you made your website navigation menu (or one similar) It's a great style, and I've not found any videos on YT that show anything similar!
Thank you, Ben! I'm really glad you liked the video. When it comes to the website navigation, do you mean the hover effect that happens on the desktop version, just the overall layout or the mobile version? Also, are you interested in the design or the actual process behind building it? I'll likely be making a video about some different website menu designs in the near future. Thank you, again, for your much appreciated support! 🙌🙏
@@ReialesaApologies for not being more specific. I would love to see the process behind it (tutorial) for the hover menu and the mobile menu. There are other popup tutorials but yours is very clean and professional looking!
Thanks for letting me know. 😃 I can't exactly say when or even if I'll be making a video on this, but I appreciate the idea. I can definitely give you some pointers, though! The menu on desktop is a mega menu. It's pretty straightforward and if you know how to use containers, you shouldn't have any issues: elementor.com/help/create-mega-menu/ The only ''special'' part about it are the hover effects. Namely, the arrow sliding in and the text changing colors. You can get a pretty clear idea about how to achieve both of these effects by watching these videos: ua-cam.com/video/hRgRurQxw6s/v-deo.html and ua-cam.com/video/pc57b3ZTQyE/v-deo.html The first video will show you how to create the color change on hover and the CSS you can find in the second video will give you a pretty clear idea of how to animate the icon. For the mobile and tablet versions, the menu is, like you said, created using a popup. You just add an icon widget into your mobile header and make it open a popup, which contains all of your elements, including a button that closes the popup. More about this here: elementor.com/help/popups/ (scroll to the bottom). For the smooth animations in your popup, you can just use Elementor's options under ''Advanced'' - ''Motion Effects'' - ''Entrance Animation''. Just make sure that you create a popup for your mobile version and a popup for your tablet version. Unfortunately, Elementor's popups can be buggy and responsive settings apply poorly to them. So it's best if you keep them separate. You'll also need 2 different icons, one visible on mobile and one visible on tablet. The mobile one opens the mobile popup and the tablet one opens the tablet popup. One important thing to note is that the padding in your header and in your popup, for the logo and the open/close buttons (and any other elements you want to keep static) should be identical. That will make sure you get that smooth transition where static elements actually remain static, instead of moving around slightly. If you want a better idea of which units to use for padding, I recommend you check out my video that discusses units in Elementor. That's pretty much it. The rest is just polishing out the details. Let me know how it goes! 💪
Learned a lot again! Thank you sir! ❤
That's awesome to hear! Thank you for your kind comment, I appreciate it! 🙌
Really great video! I would love to see how you made your website navigation menu (or one similar)
It's a great style, and I've not found any videos on YT that show anything similar!
Thank you, Ben! I'm really glad you liked the video. When it comes to the website navigation, do you mean the hover effect that happens on the desktop version, just the overall layout or the mobile version? Also, are you interested in the design or the actual process behind building it? I'll likely be making a video about some different website menu designs in the near future.
Thank you, again, for your much appreciated support! 🙌🙏
@@ReialesaApologies for not being more specific. I would love to see the process behind it (tutorial) for the hover menu and the mobile menu. There are other popup tutorials but yours is very clean and professional looking!
Thanks for letting me know. 😃 I can't exactly say when or even if I'll be making a video on this, but I appreciate the idea. I can definitely give you some pointers, though!
The menu on desktop is a mega menu. It's pretty straightforward and if you know how to use containers, you shouldn't have any issues: elementor.com/help/create-mega-menu/
The only ''special'' part about it are the hover effects. Namely, the arrow sliding in and the text changing colors. You can get a pretty clear idea about how to achieve both of these effects by watching these videos: ua-cam.com/video/hRgRurQxw6s/v-deo.html and ua-cam.com/video/pc57b3ZTQyE/v-deo.html
The first video will show you how to create the color change on hover and the CSS you can find in the second video will give you a pretty clear idea of how to animate the icon.
For the mobile and tablet versions, the menu is, like you said, created using a popup. You just add an icon widget into your mobile header and make it open a popup, which contains all of your elements, including a button that closes the popup. More about this here: elementor.com/help/popups/ (scroll to the bottom). For the smooth animations in your popup, you can just use Elementor's options under ''Advanced'' - ''Motion Effects'' - ''Entrance Animation''.
Just make sure that you create a popup for your mobile version and a popup for your tablet version. Unfortunately, Elementor's popups can be buggy and responsive settings apply poorly to them. So it's best if you keep them separate. You'll also need 2 different icons, one visible on mobile and one visible on tablet. The mobile one opens the mobile popup and the tablet one opens the tablet popup.
One important thing to note is that the padding in your header and in your popup, for the logo and the open/close buttons (and any other elements you want to keep static) should be identical. That will make sure you get that smooth transition where static elements actually remain static, instead of moving around slightly. If you want a better idea of which units to use for padding, I recommend you check out my video that discusses units in Elementor.
That's pretty much it. The rest is just polishing out the details. Let me know how it goes! 💪
good advise, I am removing social links from top as we speak )
That is a great idea and I'm happy you found my advice useful! Thank you for your support, I appreciate it. 🙌🙏