No video

How To Create a Responsive Navbar Using HTML & CSS | Step By Step Tutorial

  Рет қаралды 855,106

Web Dev Creative

Web Dev Creative

Күн бұрын

Пікірлер: 275
@webdevcreative
@webdevcreative Жыл бұрын
All source code: patreon.com/webdevcreative
@mokangibwalo8480
@mokangibwalo8480 Жыл бұрын
merci
@Blacknarrates
@Blacknarrates Жыл бұрын
I’ve worked on mine and it’s working If you need the code I can share with you. Just reply. Thank you 👍
@rakeshgowda6187
@rakeshgowda6187 Жыл бұрын
@@Blacknarrates please share
@theraveinformed
@theraveinformed Жыл бұрын
@@Blacknarrates thank you
@danieledomani
@danieledomani Жыл бұрын
@webdevcreative the link is not opening
@webdevcreative
@webdevcreative 8 ай бұрын
NEW Responsive Navbar NO JS! - kzfaq.info/get/bejne/gKuln6t62bWXhX0.html
@jannathanielausan4671
@jannathanielausan4671 Жыл бұрын
If you guys are having trouble with the toggle not showing, try minimizing your window. If you see the three lines after doing that then congrats you followed well! Now to fix this issue, the solution I found was to adjust the max width from the line that has @media from 992 to a higher number, btw mine worked at 2000px.
@johnexplorations272
@johnexplorations272 11 ай бұрын
Mine Worked When I Removed The 'Overflow:Hidden' Attribute
@kbreditz3145
@kbreditz3145 10 ай бұрын
​@@johnexplorations272 mine also work but when I reload it automatically open
@Smily_zoro
@Smily_zoro 10 ай бұрын
I followed right and put the right syntax but My media query does not working what would I do
@johnexplorations272
@johnexplorations272 10 ай бұрын
​@@Smily_zoro In your code, add this script: window.addEventListener("DOMContentLoaded",function(){ alert("Window width:" + window.innerWidth"); alert("Window height:" + window.innerHeight); } also, try adding this meta: your code wont work if the meta tag is not added, so take care of that. Edit: This occured to me too when i was learning programming, and happens usually with a lot of programmers. Just make sure you check the syntax again
@enesstasoglu
@enesstasoglu 9 ай бұрын
It worked. ty
@kb5140
@kb5140 Жыл бұрын
Great video. Had no voice over but still explained everything flawlessly
@moonomanda4266
@moonomanda4266 Жыл бұрын
I've been struggling with creative a functional navbar, thanks alot for this video 😭🙏
@WebdeveloperRull
@WebdeveloperRull 8 ай бұрын
Help me develop by subscribing so that I can be more enthusiastic about creating programming content
@peaklegacy146
@peaklegacy146 Жыл бұрын
The layout looks great but all of the shortcuts I learned from this astound me! Instant Sub!
@lethe_yoon
@lethe_yoon Жыл бұрын
Thank you for the excellent video! By the way I have a question. Is there any specific reason of using , instead of tag? I presumed that would fit semantics better than . I am a beginner , so any informative comments would be highly appreciated! Thank you sir!
@codesanskriti
@codesanskriti Жыл бұрын
There is no reason for the should have a class of 'navbar'. you can also use tag with a class of "navbar". btw using a tag itself for designing can be overwritten by its priority order. since class have higher priority than tagname
@desilvas1559
@desilvas1559 Жыл бұрын
the best video I have ever seen for the responsiveness of the website. in fact this the video which gave me the complete understanding of the responsiveness . thank you so much great work do More
@ohoLee
@ohoLee 4 ай бұрын
Thank you so much for this detailed complete video. You explained everything about mobile dropdown responsiveness here. Thanks alot. God bless you.
@LilandCec
@LilandCec 10 ай бұрын
Best! I use your videos for learning. Perfect, I understand everything without your explanation/speaking. I learn a lot, thanks to you 😊😊😊😊
@iareplaying
@iareplaying Жыл бұрын
Hey! Awesome work and thank you very much! I adjusted dropdown menu to suit my project and your tutorial helped a ton. I am having a bit of trouble with toggling an xmark, any other icon for that matter. Xmark apparently isn't included in font awesome 5 free so I tried with other icons but nothing works! Still have the good ol bars so not really an issue.
@goodnessmaikoto5088
@goodnessmaikoto5088 Жыл бұрын
This is amazing, although I would like to make a suggestion, do you think it’s possible you input speech as you code? Just for more clarity and gives you the time to explain certain things, big love and a nice one. 👏🏽
@user-zi5kl4dq6s
@user-zi5kl4dq6s 4 ай бұрын
Thank you, your video helped me so much to finish my work. I'm so grateful.
@iamAbhi09
@iamAbhi09 Жыл бұрын
Fabulous tutorial bro❤️❤️ I love it very much ❣️
@AlonePhilic
@AlonePhilic Жыл бұрын
It was a nice and clean video. Even without a voiceover, you made us understand everything. Thank you for creating this clean and great video.
@TylerIngram
@TylerIngram 6 ай бұрын
I appreciate the tutorial (even if it's not voiced over) I incorporated it into my little React project
@mohadesh8190
@mohadesh8190 7 сағат бұрын
thanks. this video was so useful for me❤
@aamonackerman8707
@aamonackerman8707 Жыл бұрын
The Background Music Is So Immersive
@oztsen6472
@oztsen6472 Жыл бұрын
bro my toggle navbar doesnt work can u help me please?
@souhaila1202
@souhaila1202 Жыл бұрын
propably you put 'quarySelector' instead of 'querySelector'
@souhaila1202
@souhaila1202 Жыл бұрын
toggle is workung for me
@OdambsTech2020
@OdambsTech2020 Жыл бұрын
My is not working
@mariaeduardabueno862
@mariaeduardabueno862 Жыл бұрын
mine wasnt too but then i realised i had typed "classlist" with a lowercased L instead of "classList" . subtle mistake.
@Crime_pays
@Crime_pays Жыл бұрын
@@souhaila1202 lol
@holiwis243
@holiwis243 Жыл бұрын
I have a question, is it necessary to add a bg-color if bg-image covers the whole screen? Why did he did like that?
@juanrey922
@juanrey922 Жыл бұрын
pocos minutos hiciste eso. eres un crack. nuevo suscriptor
@JCPMBENG
@JCPMBENG 6 ай бұрын
i love the design
@HuyenNguyen-yq6wi
@HuyenNguyen-yq6wi Жыл бұрын
wowwwwww great
@lokeshbhardwaj2043
@lokeshbhardwaj2043 Жыл бұрын
good one
@BomToxhall
@BomToxhall 10 ай бұрын
Such a simple design to follow along with, thanks a bunch!
@UnKnown-ur9fq
@UnKnown-ur9fq Жыл бұрын
ooh, it's so cute to see clean html after working with React and Next.js for a long time.. it's like playing on an old 8bit Dendy🥰😍😍😍 there are no functions, states and props here - i love it!
@mrx4256
@mrx4256 Жыл бұрын
brilliant videos...Thank you so much❤ Subscribed!
@facundocruz8133
@facundocruz8133 Жыл бұрын
awesome! 😁😁
@user-mm3xz3py9j
@user-mm3xz3py9j Жыл бұрын
Good job. Nice design
@rhonoz1175
@rhonoz1175 Жыл бұрын
Great tutorial, thanks!
@jawidsaraj5914
@jawidsaraj5914 Жыл бұрын
Marvelous
@sandra1761
@sandra1761 Жыл бұрын
Good stuff, thanks a bunch!
@asiimwecalvin6893
@asiimwecalvin6893 Жыл бұрын
This is a great saver...Thank you soo much.
@Debjit_Adhikari
@Debjit_Adhikari 7 ай бұрын
Thank you. It was so simple to understand.
@hungoan7699
@hungoan7699 Жыл бұрын
Actually it's beautiful because it has a pretty picture
@hollymayvestveit9854
@hollymayvestveit9854 Жыл бұрын
ive wrote the exact same thing as you but when i copy the bar in to the code it doesnt show up? youre relly great and i would love for this to work!
@gavonskates6689
@gavonskates6689 Жыл бұрын
same thing happened to me, did u find a fix?
@AtharvaVirpe1
@AtharvaVirpe1 Жыл бұрын
I changed few things of font-awesome and it works fine for me , I used this rel link : cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css then for bars use class = "fa fa-bars" , for cross/xmark use class = "fa fa-times" . I hope this will help you☺
@portfedh
@portfedh 10 ай бұрын
This was great! Thank you!
@88rakibmondal59
@88rakibmondal59 Жыл бұрын
great Video bro carryon and teach us more ❤❤
@fredlaurent32
@fredlaurent32 Жыл бұрын
Bravo nice job
@kinglucky5122
@kinglucky5122 Жыл бұрын
Thank you for creating this great video. ❣
@kingannun9742
@kingannun9742 Жыл бұрын
awesome
@kingannun9742
@kingannun9742 Жыл бұрын
intenté hacerlo para una página mía pero no quedó igual
@reeceslade4145
@reeceslade4145 7 ай бұрын
Great Video
@hatemalkhafaji7934
@hatemalkhafaji7934 8 ай бұрын
Thank you for sharing this video.
@jadidalmagribi
@jadidalmagribi 3 ай бұрын
Great video
@AgrajDubey7
@AgrajDubey7 10 ай бұрын
Wow such a beautiful and simple follow along tutorial. Keep on bringing quality content, you have our support 💝 Btw which background music did u use in this video??
@BidhaN...
@BidhaN... Жыл бұрын
So satisfaction 😊
@yousefnidalmahdi8647
@yousefnidalmahdi8647 Жыл бұрын
well done man!
@thawthaw1001
@thawthaw1001 Жыл бұрын
Thz bro this is so easy n very nice ilysm
@the_ansariii
@the_ansariii 6 ай бұрын
Awesome video it really helped me 🚀👌
@steec3100
@steec3100 7 ай бұрын
Hey! Great video as always 😁 I was just wondering, what web browser do you use?
@fubaradickson497
@fubaradickson497 2 ай бұрын
Thanks Chief
@Cambridge478
@Cambridge478 4 ай бұрын
Thank you so much your video helped me a lot :)
@vijaypandit17
@vijaypandit17 Жыл бұрын
very helpfull
@webdevcreative
@webdevcreative Жыл бұрын
Glad to hear that
@mrak870
@mrak870 Жыл бұрын
Realy bro its helpfully in my project i just include this instruction thanks❤️
@ictlab1032
@ictlab1032 6 ай бұрын
awesome 🥰
@CodesHub6784
@CodesHub6784 Жыл бұрын
My bars are not showing, I've reduced the size of the screen, increased max width still not showing help!!
@aminashahid2818
@aminashahid2818 Жыл бұрын
this tutorial is really helpful 😍Thanks🌼
@webdevcreative
@webdevcreative Жыл бұрын
You're welcome!
@qkamil7481
@qkamil7481 Жыл бұрын
very helpful thanks
@jaazielcrb
@jaazielcrb Жыл бұрын
Thanks man!
@Filmgraphix_studios
@Filmgraphix_studios Жыл бұрын
this is great work although my drop down is not working even after using your code from git hub..kindly assist
@kristianhans7588
@kristianhans7588 3 ай бұрын
Hi, did you find the solution?
@williamkakooza4603
@williamkakooza4603 10 ай бұрын
Thank you so much🙏
@sam-of7de
@sam-of7de Жыл бұрын
thanks mine worked perfect
@shikharsharma8355
@shikharsharma8355 4 ай бұрын
Thank you very much !!
@chouaibchouaib4819
@chouaibchouaib4819 Жыл бұрын
thank u ❤
@Moralbr-
@Moralbr- Жыл бұрын
Muito TOP \o/
@lucascavalcanti2784
@lucascavalcanti2784 Жыл бұрын
Mano. Vê se consegue me ajudar. Eu fiz todo esse tutorial, mas quando deixo o dropdown_menu ativado com 992px e aumento pra 993, o botão Get Started aparece mas o dropdown não some. Ai fico com o botão Get Started na tela e o dropdown ativado também. Sabe onde estou errando?
@ALi-Sloom
@ALi-Sloom Жыл бұрын
Thanks!
@user-zq5wq9pq9u
@user-zq5wq9pq9u 7 ай бұрын
cool video)
@badiTeyeb4771
@badiTeyeb4771 7 ай бұрын
Good❤
@prometheusreign5424
@prometheusreign5424 Жыл бұрын
Thank you.
@Iollipop87
@Iollipop87 10 ай бұрын
I was like "no way he's gonna make a responsive hamburger menu without js" (cus you say html and css in the title) but then entered js xD
@jorgeivanmonterrosanarvaez9169
@jorgeivanmonterrosanarvaez9169 Жыл бұрын
Thanks so much
@44aliano
@44aliano Жыл бұрын
Thank you brother
@its_sunil658
@its_sunil658 Жыл бұрын
Thank you so much
@ganeshgupta9692
@ganeshgupta9692 Жыл бұрын
I m sleeping 😌😴 because of good 🎵 in background 😃 LMAO 😂
@ahmedghallab5342
@ahmedghallab5342 6 ай бұрын
شكرا Thanks it was helpful
@annafeledi7909
@annafeledi7909 Жыл бұрын
thank you!!
@marcosromanfernandez3760
@marcosromanfernandez3760 11 ай бұрын
Thanks❤
@isaeldiroche2415
@isaeldiroche2415 Жыл бұрын
Tranks bro
@poojansolanki9850
@poojansolanki9850 Жыл бұрын
What music is this? i loved it..
@thrishank
@thrishank Жыл бұрын
Hey my dropdown menu is not opening when clicking the toggle button. Can anyone help me out.
@hiimfelldev
@hiimfelldev Жыл бұрын
instead using .onClick in script function, try this function: toggleBtn.addEventListener('click', () => { dropDownMenu.classList.toggle('open'); }
@marcellszucs2225
@marcellszucs2225 Жыл бұрын
mine too, did you get it?
@nobaku.3
@nobaku.3 Жыл бұрын
If you followed his tutorial completely, at the java script part, it wouldnt work for me but when I changed the .toggle_button in the script to the mentioned .toggle-button in both cases, it fixed it.
@nobaku.3
@nobaku.3 Жыл бұрын
​@@marcellszucs2225 yis
@Tenku97
@Tenku97 Жыл бұрын
@@nobaku.3 this saves me! thank you so much!
@junsu-ho
@junsu-ho Жыл бұрын
things to improve for future videos, change vscode colors, it's too dark and zoom in - too small + too dark = very bad readability ;)
@anonyme3132
@anonyme3132 Жыл бұрын
cap
@sarimsheikh140
@sarimsheikh140 Жыл бұрын
Nice work bro
@fulgorth2661
@fulgorth2661 2 ай бұрын
The title is incorrect. Either it is not a step by step or you have to write: "... Using HTML & CSS & cdnjs ...". But its helpful for most I guess.
@kazouilles
@kazouilles 19 күн бұрын
for me the javascript doesn't work, the menu doesn't appear when i click
@iamuser400
@iamuser400 Жыл бұрын
that .dropdown_menu open thing doesnt work for me. i got lost from that minute. who else?
@hypertea9240
@hypertea9240 Жыл бұрын
Did you solve it bro please help me
@nwankwodaniel1438
@nwankwodaniel1438 Жыл бұрын
Let's learn together
@taromuzikpie
@taromuzikpie Жыл бұрын
same caught error
@asifahmed6568
@asifahmed6568 Жыл бұрын
You have to give space after dropdown menu and write. Open if there's no gap it won't work
@iamuser400
@iamuser400 Жыл бұрын
@@nwankwodaniel1438 I actually switched to backend long ago. I no longer design frontend. I was in my beginning face and hadn't decided on what to learn. But he has the answer in the replies, check them out.
@mr.joker3990
@mr.joker3990 Жыл бұрын
How you resize the background image? how it is responsive?
@webdevcreative
@webdevcreative Жыл бұрын
Thanks for your comment and for your interest in my video! To make the background image responsive, I used CSS to set the background position to center and the background size to cover. This allows the image to scale up or down depending on the size of the screen while keeping it centered. I hope that helps! Let me know if you have any other questions.
@MovieHeretic
@MovieHeretic 3 ай бұрын
JS not working in Firefox based on screen code shown here.
@blxckgamez1866
@blxckgamez1866 Жыл бұрын
This bar looking amazing and works fine. But when i minimalize the Site, the Tabs "Hero, About.." are always shown. I allready search the miss, but i dont found it.. can anyone help me please?
@marvelworld5210
@marvelworld5210 7 ай бұрын
Thanku ❤
@narayanshrestha7814
@narayanshrestha7814 Жыл бұрын
please teach hamburger responsive menu using js
@agusarianto7484
@agusarianto7484 7 ай бұрын
thanks bro
@guerreroHTRUJILLO
@guerreroHTRUJILLO 4 ай бұрын
Can someone share the final index.html and style.css I've trouble with the toggle button, for some reason is not working to me, I want to check where I messed up.
@piisale
@piisale Жыл бұрын
The title of the video says HTML and CSS yet there’s also JavaScript. Is it even possible to do A hamburger menu without JS.?
@IuryNovarino
@IuryNovarino Жыл бұрын
yes, it's possible.
@omerbabo
@omerbabo 8 ай бұрын
thank you
@sahaskamble4467
@sahaskamble4467 11 ай бұрын
I really..... liked background music can anyone tell me which one is it
@TheXxtremeJosh
@TheXxtremeJosh Жыл бұрын
When I reduce the screen my bars disapear, I dont know why
@bimbim1862
@bimbim1862 Жыл бұрын
how close navbar if widow click?
@karansalunkhe4799
@karansalunkhe4799 Жыл бұрын
@modernmovies9937
@modernmovies9937 Жыл бұрын
When I'm adding about us section after all this code so why my about us pic and text go up
@amsalghur9109
@amsalghur9109 10 ай бұрын
Hello Web Dev Creative, is it possible to have logo on center and links on left and the button on right side in the navbar if this does possible recommend some videos or just me here because I am struck to learn my how to make responsive navbar sorry bothering you. please let me know.
How to create a Responsive Navigation Bar (for beginners)
15:21
Coding2GO
Рет қаралды 372 М.
Schoolboy Runaway в реальной жизни🤣@onLI_gAmeS
00:31
МишАня
Рет қаралды 2,3 МЛН
Get 10 Mega Boxes OR 60 Starr Drops!!
01:39
Brawl Stars
Рет қаралды 16 МЛН
How to Create Responsive Navbar using HTML & CSS
16:52
Codehal
Рет қаралды 154 М.
How to Create Responsive Navigation Bar using HTML and CSS
8:00
CodingNepal
Рет қаралды 2,8 МЛН
How to Create a Responsive Navbar using Bootstrap 5  | Responsive Sidebar Menu 2.0
22:22
Mathe. | Creative Coding Camp
Рет қаралды 6 М.
Learn CSS Flexbox in 20 Minutes (Course)
20:37
Coding2GO
Рет қаралды 52 М.
Responsive navbar tutorial using HTML CSS & JS
49:25
Kevin Powell
Рет қаралды 1 МЛН
Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox
15:08
A practical guide to responsive web design
23:13
Kevin Powell
Рет қаралды 192 М.
Create Crazy 3D Image Slider Effects Using CSS Only
14:07
Lun Dev
Рет қаралды 282 М.
Schoolboy Runaway в реальной жизни🤣@onLI_gAmeS
00:31
МишАня
Рет қаралды 2,3 МЛН