AWWWARDS INSPIRED NAVBAR - Elementor Wordpress Tutorial Flex Container

[@andreaegli]

Let's build this cool navbar! What do you think, will you be using this in any of your projects?

[@javedomor7284]

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

[@AdityaSingh-ni7vn]

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]

thank you for helping out the community 😉

[@AdityaSingh-ni7vn]

@@andreaegli Welcome😊

[@StorageQuest]

wowowow tyyy

[@anofficialvictory]

Stumbled on your channel while seeking to build a mobile menu, thank you for being cool

[@andreaegli]

Aww, you are such a darling!🤩

[@AndreaFretes]

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!

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

[@pradeepkumarsampath9066]

Hi, Thanks for this awsome tutorial. But I don't have the spaces you have between the nav's item, after the CSS code. They're all touch each other. How to add space between nav's items.

[@zamilahamed]

It’s absolutely amazing 🤩

[@andreaegli]

Thanks, Zamil🙂

[@kamessytta]

Well done😊👍👌👏👏👏❤

[@andreaegli]

😁 Thanks for watching!

[@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 ❤️❤️❤️

[@moog6513]

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.

[@AtapuercasMan]

Sure! Here's the translation: Hi Andrea, I hope you can help me with the code. When I tap on the hamburger menu on mobile, the following error appears: [elementor-template id="1154"]. I've checked the IDs thoroughly. Another detail is that I'm learning CSS. Thanks.

[@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🤓

[@Webvision-e4r]

amazing! is there any chance to make the color change depending on the section/ page i am on ?

[@zafit02]

love your videossss

[@andreaegli]

Thank you so much, Santiago 🤓

[@Jebesniper]

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]

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]

@@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_ME]

19:50 notificaton

[@tannerhodgkinson8385]

Hey Andrea would you happen to know why it works on tablet and desktop but not mobile? thank you!

[@andreaegli]

Hey! What exactly doesn't work?

[@tannerhodgkinson8385]

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

Can you make a tutorial on the menu which you have? That will be help me a lot

[@andreaegli]

Which menu?

[@ACEARYAN]

@@andreaegli you have already made a video on that i am sorry and thank you soo muchh

[@andreaegli]

@@ACEARYAN you're welcome! 😀

[@Freelancermukta-u6h]

Hello, how is the popup menu linked to the hamburger icon?

[@pem18992]

You are amazing ❤

[@andreaegli]

Thank you, Carlos🤓

[@pem18992]

@@andreaegli np ❤️

[@AdityaSingh-ni7vn]

hey i am unable to get the pop up. i have created and added shortcode of pop up still its not working

[@timoteopepe]

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]

Hey Timoteo! Thank you 😊 can you send me the link your project so I can see what you mean? 😉

[@adidanieldm]

Hello, I have the same problem. Can you help me?

[@MNasrr]

@@adidanieldm hello i have same problem did u find help?

[@MNasrr]

hello i have same problem did u find help?

[@teuccio73]

Good !

[@andreaegli]

Thank you Teo 🤓

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

[@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]

HI does this work, Ive changed the template using my ID number and yet still it doesnt work @@andreaegli

[@AdityaSingh-ni7vn]

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]

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]

That's strange because I used the same exact code on a project recently and it's working just fine...

[@ricardovaldivia9828]

The same happens to me. I don´t get the burger menu to show the popup

[@ДмитроКуліченко-с8м]

@@andreaegli The same happens to me. I don´t get the burger menu to show the popup. Could you please clarify where the number of the template is specified ? Thank you very much for your videos, they are all very interesting and useful.