AWWWARDS INSPIRED NAVBAR - Elementor Wordpress Tutorial Flex Container
Рет қаралды 9,321
Күн бұрын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
@andreaegli Жыл бұрын
Let's build this cool navbar! What do you think, will you be using this in any of your projects?
@AndreaFretes 25 күн бұрын
i am fanatic of ur tutorials!!! LOVE ALL OF THEM! thanks for so much :)
@franktielemans6624 Жыл бұрын
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) )
@andreaegli Жыл бұрын
Oh, yeah! That's the smart solution!!!! Thanks, Frank!
@AdityaSingh-ni7vn 2 ай бұрын
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
@andreaegli 2 ай бұрын
thank you for helping out the community 😉
@AdityaSingh-ni7vn 2 ай бұрын
@@andreaegli Welcome😊
@anofficialvictory 5 ай бұрын
Stumbled on your channel while seeking to build a mobile menu, thank you for being cool
@andreaegli 5 ай бұрын
Aww, you are such a darling!🤩
@niranjanneeru6489 Жыл бұрын
ahhh always wanted to do that, and i decided to implement this style on my upcoming project really cool tutorial as always
@andreaegli Жыл бұрын
Talk about inspiration, huh?🤓 Awesome! What kind of website is it?
@javedomor7284 5 ай бұрын
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
@zamilahamed Жыл бұрын
It’s absolutely amazing 🤩
@andreaegli Жыл бұрын
Thanks, Zamil🙂
@zafit02 Жыл бұрын
love your videossss
@andreaegli Жыл бұрын
Thank you so much, Santiago 🤓
@kamessytta Жыл бұрын
Well done😊👍👌👏👏👏❤
@andreaegli Жыл бұрын
😁 Thanks for watching!
@user-os7dz7lj2g 9 ай бұрын
amazing! is there any chance to make the color change depending on the section/ page i am on ?
@gryonz Жыл бұрын
Excellent tutorial, thank you very much! I have a huge doubt. How do you get your elementor panel to look like this? is incredible!
@andreaegli Жыл бұрын
Thank you! I just keep my Elementor updated to the latest version🤓
@timoteopepe 2 ай бұрын
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?
@andreaegli 2 ай бұрын
Hey Timoteo! Thank you 😊 can you send me the link your project so I can see what you mean? 😉
@pem18992 Жыл бұрын
You are amazing ❤
@andreaegli Жыл бұрын
Thank you, Carlos🤓
@pem18992 Жыл бұрын
@@andreaegli np ❤️
@moog6513 9 ай бұрын
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.
@jean-mahmoud_du_tacobel Жыл бұрын
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 🌺
@andreaegli Жыл бұрын
Thank you, Jean! I will do a test and get back to you with a solution soon😉
@jean-mahmoud_du_tacobel Жыл бұрын
@@andreaegli You're the one ever thank you ❤️❤️❤️
@teuccio73 Жыл бұрын
Good !
@andreaegli Жыл бұрын
Thank you Teo 🤓
@AdityaSingh-ni7vn 3 ай бұрын
hey i am unable to get the pop up. i have created and added shortcode of pop up still its not working
@Jebesniper 7 ай бұрын
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
@andreaegli 7 ай бұрын
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 ;)
@Jebesniper 7 ай бұрын
@@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
@RAHAT_PY 5 ай бұрын
19:50 notificaton
@jonhanlan Жыл бұрын
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. :)
@andreaegli Жыл бұрын
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?
@jonhanlan Жыл бұрын
@@andreaegli Based on other templates I've seen in the past you can do $3-$5 for things like this.
@tannerhodgkinson8385 3 ай бұрын
Hey Andrea would you happen to know why it works on tablet and desktop but not mobile? thank you!
@andreaegli 3 ай бұрын
Hey! What exactly doesn't work?
@tannerhodgkinson8385 3 ай бұрын
@@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.
@ACEARYAN 11 ай бұрын
Can you make a tutorial on the menu which you have? That will be help me a lot
@andreaegli 11 ай бұрын
Which menu?
@ACEARYAN 11 ай бұрын
@@andreaegli you have already made a video on that i am sorry and thank you soo muchh
@andreaegli 11 ай бұрын
@@ACEARYAN you're welcome! 😀
@juniornascimento3433 Жыл бұрын
Hello, how is the popup menu linked to the hamburger icon? Very good your videos, congratulations.
@andreaegli Жыл бұрын
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!
@katlegoseanmahaye3309 10 ай бұрын
HI does this work, Ive changed the template using my ID number and yet still it doesnt work @@andreaegli
@AdityaSingh-ni7vn 4 ай бұрын
still unable to do it
@joelgracia130 Жыл бұрын
Nice videos, sell it as a template
@andreaegli Жыл бұрын
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?
@habilosauditoredafirenze3564 10 ай бұрын
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 🥲
@andreaegli 10 ай бұрын
That's strange because I used the same exact code on a project recently and it's working just fine...
@ricardovaldivia9828 8 ай бұрын
The same happens to me. I don´t get the burger menu to show the popup
andrea egli
Рет қаралды 8 М.
Immersed
Рет қаралды 118 МЛН
Kirill Multitool
Рет қаралды 73 МЛН
andrea egli
Рет қаралды 15 М.
Rino de Boer
Рет қаралды 562 М.
andrea egli
Рет қаралды 12 М.
andrea egli
Рет қаралды 11 М.