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
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) )
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.
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
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.
@@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.
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! 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!
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 🥲
Let's build this cool navbar! What do you think, will you be using this in any of your projects?
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😊
wowowow tyyy
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
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!
i am fanatic of ur tutorials!!! LOVE ALL OF THEM! thanks for so much :)
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.
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?
It’s absolutely amazing 🤩
Thanks, Zamil🙂
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
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.
amazing! is there any chance to make the color change depending on the section/ page i am on ?
Well done😊👍👌👏👏👏❤
😁 Thanks for watching!
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 ❤️❤️❤️
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.
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🤓
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.
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? 😉
Hello, I have the same problem. Can you help me?
@@adidanieldm hello i have same problem did u find help?
hello i have same problem did u find help?
love your videossss
Thank you so much, Santiago 🤓
You are amazing ❤
Thank you, Carlos🤓
@@andreaegli np ❤️
Good !
Thank you Teo 🤓
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
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.
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
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