Bro plz tell how to give nav ul li ul li >a show when i click. If i click than dropdown icon it suddenly goes up, the dropdown doesn't show plz send me the coding bro
I agree with last comment I,ve seen other videos to this regard yours was and is THE BEST EZ AND SIMPLE more importantly no hidden codes and tricks hope will see more video from you do you any JS videos ? I also encourage you do more simple video like this one.thank you
There's a lot of positive people here. I'm not completely one of them. My criticism is rooted in one simple thing: the use of an external library without proper disclosure to that fact. In the video, the library is referred to as a downloaded file but on Github, it's linked by url directly from the code. While it's called "fontawesome-free", that doesn't necessarily make it free to use. Using this code in a project either doesn't work off the bat or opens up a potential vulnerability on top of making internet connection a requirement for further development. Removing the references to the external library makes the rest of the code useless since they are key pieces to opening and closing the menu. I'd think it better for image files to be included in the project and referred to directly so that there is no reliance on foreign, unexplained or undisclosed elements. Other then that, very to the point guide and clean coding!
I just need to know how or where did you get the hamburger icon. I watched your video few times, I went to your repository on GitHub. I even copied and paste it on my VS to see if I was getting something wrong, but neither like that I could get to see the icon :( any comment about it? Thanks
I love your code but what very wierd is how your images are used in tag which for some reason italic tag works as an Img? Very confusing & somehow my I'm don't active the nav .main menu to show so idk but still love your tutorial
Okay I made a site using this but when i debug it on codepen or git hub pages. On my phone menu bar is already opened for like 20px down blocking other elements on the site. How can i fix that
I So wanna you this in CARRD. i'm struggling with understanding how to piece these codes together to work in a embed element i've tested the html in W3school but can't figure how to merge the cssstyle to work.. Or maybe i'm missing something any help would be great
In this hamburger menu , I am using an external css file and a link element to link it with my html code. You can either use inline css or an external css file . I am using also Font-awesome library for icons so u need also to add that to your html to have icons on menu.
if it dos't appears , then u shoud go to fontawesome website , copy the tag element of instagram icon and replace it in your code. Instagram icon : fontawesome.com/icons/instagram?s=brands Or u can download the source code of this menu from this github repo : github.com/Deltaty-Code/Humburger-Menu
Hi, If the click event isn’t working this means there is an error or a bug in the JavaScript code . I propose you download the source code for this Hamburger menu from the GitHub and try to integrate it in your app. You will find the link in the description section.
@@Lama-Code Thanks for the reply. I used the burger.html css and included js file into the Visual Studio and made some more tags, but bars are still not working. Desktops navs going from page to page, just the bars. Hmm
Thanks for this. I have managed to incorporate it in my page. I am still struggling with something. When I click the humberger menu and close it, the background color remains as instead of disappearing. I am still working on a solution.
i have tried this code and problem when i click clos menu and wat to click on menu bar again ...there is a proplem. i think somthing wrong on JS but i am beginer.
In midea query (position: fixed), why is it necessary? If i not put position: fixed then my close & hamburger menu doesn't work. Why is it happen? Someone please HELP me.
Why Position fixed is necessary ? Simply because when you scroll down we want to the sidemenu to be fixed so if we use the absolute position we will not be able to see the sidemenu if we are in bottom of the page .
hi Tazuzu did you sort this? I know where you're coming from, when you click the links the JS menu doesn't close unless you click the closeMenu? I'm just looking into this now...
I just added a new eventListner for mainMenu and it worked fine: mainMenu.addEventListener("click", close); Great tutorial Deltay Code! much appreciated.
hey first of, your hamburger menu is very nice and helpful thanks for that! but I have one problem. i tried to add opacity to the nav menu, but when i do it is not working anymore (in the mobile version) (its scrolling very fast down and vanishes) can you help me please :)?
I think that if you change the opacity of the navbar , this won't affect the functionality of the hamburger menu, Just try to download it from here : github.com/Deltaty-Code/Humburger-Menu. Add the opacity in your style.css file and that's it . I hope this help you .
You can place it on the left using position property , check this tutorial where u can see how to make sidebar menu : th-cam.com/video/_XRvPZzRIbo/w-d-xo.html
I started coding when I was in university, then I decided to improve my skills by learning from the internet (TH-cam tutorials, coursera,openclassroom,....etc) , so always 'learn and practice' , this is my advice for u if u're new to the web dev.Good luck K Col 👍.
@@meryem3068 Hey, you need to go to fontawesome website and get the url to post into your html area with the other links. That's how the take gets the icon. I don't know why this useless guy with his useless video didn't include this step.
Subscribefor more videos : www.youtube.com/@Lama-Code
thanks for this, it's the simplest tutorial for a hamburger menu on TH-cam!
I had to rewind like 300 times but it's working!
tnx again 🤘
thank you for your valuable comment
Thank you so much for this... You taught me a way no other video taught me... Simple yet very very effective... Love you 3000!
Thanks 😊
Thanku soo soo much bro.. Its very easy.. I selected for a company😁🤝
Hhh, So funny 😂. Enjoy it.
Bro plz tell how to give nav ul li ul li >a show when i click. If i click than dropdown icon it suddenly goes up, the dropdown doesn't show plz send me the coding bro
@@billa4801 , u can use css or javascript to do this . u can download the source code from the description section.
@@Lama-Code ok bro i will try
Th source code for this Hamburger 🍔 menu is on Codepen: codepen.io/m-mourouh/pen/JjMQjOz
I was just struggling trying to make a hamburger button!! Thank you very much for sharing your knowledge
Thank you too , keep learning
Wow 😍
Beautiful. I love it when JS is kept simple like this!
The javascript code solved my problem
Thank you
I agree with last comment I,ve seen other videos to this regard yours was and is THE BEST EZ AND SIMPLE more importantly no hidden codes and tricks hope will see more video from you do you any JS videos ? I also encourage you do more simple video like this one.thank you
thank you for your valuable feedback
I found other solutions on internet they do the same with triple amount of code. Thanks for make it simple.
Happy to help
You literally saved my life. Thank You
There's a lot of positive people here. I'm not completely one of them.
My criticism is rooted in one simple thing: the use of an external library without proper disclosure to that fact. In the video, the library is referred to as a downloaded file but on Github, it's linked by url directly from the code.
While it's called "fontawesome-free", that doesn't necessarily make it free to use. Using this code in a project either doesn't work off the bat or opens up a potential vulnerability on top of making internet connection a requirement for further development.
Removing the references to the external library makes the rest of the code useless since they are key pieces to opening and closing the menu.
I'd think it better for image files to be included in the project and referred to directly so that there is no reliance on foreign, unexplained or undisclosed elements.
Other then that, very to the point guide and clean coding!
i guess we could add a hamburger icon using three div's... not sure about the cross tho
thank you for saving my life.
😉
thanks, it's easy to practice and simple
Glad it helped!
for me, the first transition doesnt have a smooth entrance. what could be? thank u!
Same here even though nav .mainmenu{ has transition effect is somehow pops up not smooth too
I had the same problem, you have to set "top: -100%;" and "display: flex;" inside the media query instead of "top: 0;" and "display: none;"
@@santiagobonilla6306 Thank You :) :)
@@santiagobonilla6306 THANK YOU DUDE
I just need to know how or where did you get the hamburger icon. I watched your video few times, I went to your repository on GitHub. I even copied and paste it on my VS to see if I was getting something wrong, but neither like that I could get to see the icon :( any comment about it? Thanks
Yes, in this video I was using icons from FontAwesome library that had on my machine. But of course you can use CDN link and add it to use html file
Check codepen where I used cdn instead : codepen.io/m-mourouh/pen/JjMQjOz
Thank you!
very nice videvo, ij endžodžoj it veri mač, tenk ju sop much
I love your code but what very wierd is how your images are used in tag which for some reason italic tag works as an Img? Very confusing & somehow my I'm don't active the nav .main menu to show so idk but still love your tutorial
tag is used to add icons from frontawesome library
very nice sidebar for my portfolio, i will use that. i'm too create video about that 😍
Thank you
@@Lama-Code you're welcome!
Okay I made a site using this but when i debug it on codepen or git hub pages. On my phone menu bar is already opened for like 20px down blocking other elements on the site. How can i fix that
You can use this sidebar menu instead : th-cam.com/video/QQlxvj_GKss/w-d-xo.html
@@Lama-Code Okay Problem Resolved : You just have to put height 85vh on @media query
Thank you. Concise and effective. You saved my life. 👏🏿👏🏿👏🏿👏🏿👏🏿👏🏿👏🏿
Great! very small and simple coding.
I So wanna you this in CARRD. i'm struggling with understanding how to piece these codes together to work in a embed element i've tested the html in W3school but can't figure how to merge the cssstyle
to work.. Or maybe i'm missing something any help would be great
In this hamburger menu , I am using an external css file and a link element to link it with my html code. You can either use inline css or an external css file .
I am using also Font-awesome library for icons so u need also to add that to your html to have icons on menu.
@@Lama-Code do you have a discord by any chance?
@@ANDREWBRYAN-i5c Yes
@@ANDREWBRYAN-i5c Discord channel : discord.com/channels/1195699503915868230/1195699505115443315
Thank you, but I have a question, the first time I click on the hamburger menu, the transition doesn't happen
You can get the code of this hamburger 🍔 menu from the Github link in the description section and check if u forgot something.
Thank you so much. You have really helped me!
Enjoy it
I followed but the instagram icons never appeared
if it dos't appears , then u shoud go to fontawesome website , copy the tag element of instagram icon and replace it in your code.
Instagram icon : fontawesome.com/icons/instagram?s=brands
Or u can download the source code of this menu from this github repo : github.com/Deltaty-Code/Humburger-Menu
@@Lama-Code i copied the element but its still not showing
Use FontAwesome CDN, and add it to your HTML file
Codepen: codepen.io/m-mourouh/pen/JjMQjOz
Great video! Solved my problem quickly.
Awesome Tutorial! Works and its responsive! Thanks
Oh thank u
i love it good job bro
Thank you so much , I love this video and the music !!
I tried incorporating this into a website for practise. I cant get the bars to function when clicked. Can you offer any help.
Hi, If the click event isn’t working this means there is an error or a bug in the JavaScript code . I propose you download the source code for this Hamburger menu from the GitHub and try to integrate it in your app.
You will find the link in the description section.
@@Lama-Code Thanks for the reply. I used the burger.html css and included js file into the Visual Studio and made some more tags, but bars are still not working. Desktops navs going from page to page, just the bars. Hmm
Thanks for this. I have managed to incorporate it in my page. I am still struggling with something. When I click the humberger menu and close it, the background color remains as instead of disappearing. I am still working on a solution.
I added Javascript tag everything but the sidebar is not working.. tell me y?
I think you miss something in html but you can download the code from the description section 😉
Great Job friend
Thank you very much
Thanks bro everything is working but when I click on any menu it remains in the position, I want when clicked on any option shutter closes on itself.
To do this you just need to use a foreach loop for menu items and add an eventListen to each item so when it's clicked call the close function .
I have just updated the respo and I added this feature to the hamburger menu :
you can download it from here : github.com/Deltaty-Code/Humburger-Menu
This is quality. So simple and yet so brilliant. Thanks a lot.
I have a problem. I reduced the size of the navbar and the hamburger wont show. Please any help would be appreciated
Probably, you need to change sideBar position as well when it's opened so you can see it
Yo m8 i have some problems with this kts all DONE but when i try to close thr menu its not working. Can someone help me thanks ❤️❤️
might as well help him then m8?
Hey, good job. How do you select (at 01:43) 4 lines to write the same thing in the same time with VS Code ? Thanks
use this shortcut : shift + alt + ctrl + arrow_down
@@Lama-Code ok, thanks a lot.
Thank you very much! very helpful video.
i have tried this code and problem when i click clos menu and wat to click on menu bar again ...there is a proplem. i think somthing wrong on JS but i am beginer.
Check the source code in the description section
you are doing this job meine bruder just move on you'll be best
thank you so much
Excellent tutorial, thanks a million !!!
Thank you so much Edwar
Why does my hamburger menu not going to the right? everything works fine but the 3 bars are stuck on the left side of my screen.
Try to watch this video where I created a hamburger menu using only css
little explanation would be really appreciated
Thanks
Nice work, man. Thanks 🔥🔥
💖💖💖
In midea query (position: fixed), why is it necessary?
If i not put position: fixed then my close & hamburger menu doesn't work. Why is it happen? Someone please HELP me.
Why Position fixed is necessary ?
Simply because when you scroll down we want to the sidemenu to be fixed so if we use the absolute position we will not be able to see the sidemenu if we are in bottom of the page .
@@Lama-Code Thank u bro.
Hello, when I select one of menu - openMenu does not want to close. How to repair it? Thank you
to solve your issue , please check the source code in the description section,
hi Tazuzu did you sort this? I know where you're coming from, when you click the links the JS menu doesn't close unless you click the closeMenu? I'm just looking into this now...
I just added a new eventListner for mainMenu and it worked fine:
mainMenu.addEventListener("click", close);
Great tutorial Deltay Code! much appreciated.
Thanks a lot Sir.
I cant see the hamburger button, I verified it with replacing my code with the github code, and it's not working
you cannot see buttons if your laptop was not connected to internet because fontawesome cdn needs that
@@Lama-Code it was connected to the internet
it does not appear in me either. could you
@@Lama-Code How do i contact you: i followed all your instructions, but my burger bottons won't expand. what could be the matter?
wa nta mghribi dkhl chwiya dial darija f hdartk hhhh
Hhh
Thank u
Welcome
The hamburger menu isnt popping up for me
You can download the source code of this hamburger menu from the link in the description section .
thank you man !
you are welcome
how to have the 3 bars in full screen i would like to have it also even in full screen and how to add a direction to a link when you click on it
To add the bars icons use the fontawesome library
to add link onclick use the HTML tag
@@Lama-Code where place the
@@mistergameur51230 in HTML file, just like this Contact
@@Lama-Code its walking but I want that when I click on the instagram logo its redirects its just creates a link to ribbed
At minute 6.45 when I wanted to reduce to mobile, the bars disappeared. Unfortunately I abandon. Good luck to those who made it. Thank you
You can download the source code of this hamburger menu from the link in the description section.
I love the simple js
thank man 😇
U’re welcome
hey first of, your hamburger menu is very nice and helpful thanks for that! but I have one problem. i tried to add opacity to the nav menu, but when i do it is not working anymore (in the mobile version) (its scrolling very fast down and vanishes)
can you help me please :)?
I think that if you change the opacity of the navbar , this won't affect the functionality of the hamburger menu,
Just try to download it from here : github.com/Deltaty-Code/Humburger-Menu.
Add the opacity in your style.css file and that's it .
I hope this help you .
hi, love u ♥ thanks
I love u too
how to place the menu on the left ?
You can place it on the left using position property , check this tutorial where u can see how to make sidebar menu : th-cam.com/video/_XRvPZzRIbo/w-d-xo.html
awesome) i love it)
thank you!!!!
U’re welcome
fa characters not working
You can find the source code of this project in the description section
I don't even know where to begin, or where you went to start adding these codes. Or the platform. Would have appreciate steps
Can u tell me where u went and start coding plz thank u 🙂
I started coding when I was in university, then I decided to improve my skills by learning from the internet (TH-cam tutorials, coursera,openclassroom,....etc) , so always 'learn and practice' , this is my advice for u if u're new to the web dev.Good luck K Col 👍.
@@Lama-Code i appreciate u thanks
@@Lama-Code new sub
thank you very much
Awesome!!!
NOSSA IRMÃO TE AMO !!!!!
Good one
thank you
you should explain what you are doing instead of putting in music. It's kind of confusing.
😂
thanks a lot
gracias !!!
Baghi nsawlak
Mar7ba
I literally used your source code and this crap doesn't even work.
Check this one 😉: th-cam.com/video/QQlxvj_GKss/w-d-xo.html
B
please reduce or REMOVE THE MUSIC: NOT A MUSIC CLASS YOU KNOW
Thank you
brother no one needs background music ,instead you could have narrated the process.
I started improving the quality of my videos and I will replace music 🎶 with explaining projects I create.
Thank you brother for your advice.
thanks so much
I cant see the hamburger button, I verified it with replacing my code with the github code, and it's not working
you need to be connected to the internet because icons are imported from fontawesome library
@@Lama-Code how is it transferred. can you help me?
@@meryem3068 Hey, you need to go to fontawesome website and get the url to post into your html area with the other links. That's how the take gets the icon. I don't know why this useless guy with his useless video didn't include this step.
Thanks :)
thank u