AWWWARDS INSPIRED NAVBAR - Elementor Wordpress Tutorial Flex Container
ฝัง
- เผยแพร่เมื่อ 30 มิ.ย. 2024
- Although inspired by the Awwwards website, this navbar is pretty versatile
CODE: www.notion.so/CODE-Awwards-na...
Timestamps:
00:00 Intro
00:37 Building the navbar
20:56 Building the popup menu (not an actual popup)
27:10 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
![[LIVE] : ONE ลุมพินี 68 | คู่เอก "พระจันทร์ฉาย vs โจนาธาน"](http://i.ytimg.com/vi/F3IM3w-XchI/mqdefault.jpg)
Let's build this cool navbar! What do you think, will you be using this in any of your projects?
i am fanatic of ur tutorials!!! LOVE ALL OF THEM! thanks for so much :)
instead of using fixed position guys you can use this code, step-1: paste the code on main container with class navbar.
.navbar {
position: fixed;
bottom: 20px; /* Adjust the distance from the bottom */
left: 50%;
transform: translateX(-50%);
padding: 25px;
}
this will do the work and is a better way than the fixed one. Much love to Andrea and her content
thank you for helping out the community 😉
@@andreaegli Welcome😊
ahhh always wanted to do that, and i decided to implement this style on my upcoming project really cool tutorial as always
Talk about inspiration, huh?🤓 Awesome! What kind of website is it?
Stumbled on your channel while seeking to build a mobile menu, thank you for being cool
Aww, you are such a darling!🤩
To position (fixed) the navbar in the center don't use 33% but use the custom units. (the pencil icon)
The width of the navbar is 686px so to position is in the center use:
calc(50% - (686px / 2) )
Oh, yeah! That's the smart solution!!!! Thanks, Frank!
It’s absolutely amazing 🤩
Thanks, Zamil🙂
4:52 you can use the Flexible Elementor Panel plugin to control/ move the editor panel anywhere then the content will be show in full screen
love your videossss
Thank you so much, Santiago 🤓
Well done😊👍👌👏👏👏❤
😁 Thanks for watching!
Excellent tutorial, thank you very much! I have a huge doubt. How do you get your elementor panel to look like this? is incredible!
Thank you! I just keep my Elementor updated to the latest version🤓
amazing! is there any chance to make the color change depending on the section/ page i am on ?
You are amazing ❤
Thank you, Carlos🤓
@@andreaegli np ❤️
Really nice nav ! I don't have the spaces you have between the nav's item, after the CSS code. They're all stuck together.
Well done dear 💪 I don't understand why the active effect on nav don't run form me with my anchors. Do you have idea ? You're the one 🌺
Thank you, Jean! I will do a test and get back to you with a solution soon😉
@@andreaegli You're the one ever thank you ❤️❤️❤️
Good !
Thank you Teo 🤓
Hi @andreaegli, crazy tutorial, thank you! I just have an issue in the last phase, my mobile menu is not 100 width but remain a little centered box in the screen. In my "mobile menu" template it works but when I link it in the main "header" template it doesn't fit anymore. Can you help me pls?
Hey Timoteo! Thank you 😊 can you send me the link your project so I can see what you mean? 😉
Hi andrea. thanks again for the tutorial. I loved it but is there a way to make it a dropup menu? Like the menu goes upward instead of dropdown with this kind of navbar? Please reply
Hey! You are very welcome. Like the one on the awwwards website? I need to see if I can make it because that's pretty cool...Next year ;)
@@andreaegli yeah like dropdown but upward i’ve been searching for it for many hour’s couldn’t find how can i make a dropdown working upwards lol
Have you thought about selling these as templates? Would be super nice for those who don't have time to follow along but respect your work. :)
I have for a long time now and I keep going back and forth on it but I think I will ;) How much would you pay for this template for example?
@@andreaegli Based on other templates I've seen in the past you can do $3-$5 for things like this.
Can you make a tutorial on the menu which you have? That will be help me a lot
Which menu?
@@andreaegli you have already made a video on that i am sorry and thank you soo muchh
@@ACEARYAN you're welcome! 😀
hey i am unable to get the pop up. i have created and added shortcode of pop up still its not working
Hello, how is the popup menu linked to the hamburger icon? Very good your videos, congratulations.
Hey! add the number of your template in the HTML & CSS code, like this:
[elementor-template id="2688"] (change the number of the template with your own)
.elementor-2688 {
width: 100%;
animation: fadeInRight 1s ease-in-out;
}
Hope this helps! thank you so much!
HI does this work, Ive changed the template using my ID number and yet still it doesnt work
@@andreaegli
still unable to do it
Hey Andrea would you happen to know why it works on tablet and desktop but not mobile? thank you!
Hey! What exactly doesn't work?
@@andreaegli for example when i press the burger icon on mobile it slides into screen but at the bottom where the header is located rather than at the top.
19:50 notificaton
Nice videos, sell it as a template
Thank you, Joel! I've been told this before and you know what, I think I might just do it😁 how much would you pay for it?
Hey, great tutorial! I wanted to use this for a project, but I was wondering because suddenly the burger navigation doesn't seem to work. there is just a small box on the bottom right corner 🥲
That's strange because I used the same exact code on a project recently and it's working just fine...
The same happens to me. I don´t get the burger menu to show the popup