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

Подписаться 13 тыс.

Просмотров 765 тыс.

50% 1

#navbar #responsivenavbar #css
In this tutorial, we will be building a responsive navbar using HTML and CSS(navigation bar in html and css). This navbar will adjust to different screen sizes, making it perfect for any website. We will be using media queries to make the navbar responsive. You will learn how to create a toggle button that opens and closes the menu, as well as how to style the menu items. This is a great project for beginners looking to improve their HTML and CSS skills. So, let's get started!
--------------------------------------------------------------------------------
NEW Responsive Navbar NO JS! - • How To Create a Respon...
--------------------------------------------------------------------------------
0:00 Intro
0:40 HTML
2:33 CSS
7:15 CSS Responsive Design
8:04 HTML Dropdown Menu
8:28 Styling Dropdown Menu
10:51 JavaScript
12:38 Dropdown Menu CSS Media Queries
13:16 HTML Hero Section
13:30 Styling Hero Section
-----------------------------------------------------------------------------
Subscribe:
-----------------------------------------------------------------------------
Source Code: / webdevcreative
GitHub Initial Code: github.com/webdevcreative/res...
--------------------------------------------------------------------------------
Love my videos? Support me by buying me a coffee. Thank you! : www.buymeacoffee.com/webdevcr...
--------------------------------------------------------------------------------
- How To Make Responsive Navbar with Bootstrap 5: • How To Make Responsive...
- Responsive Fast Food Web Design Using HTML and CSS: • Responsive Fast Food W...
- Build Illustration Style Website With Responsive Design: • Build Illustration Sty...
- Neumorphism Music Player UI and Basic Functionality: • Neumorphism Music Play...
- Build a Modern Website with Tailwind CSS and HTML: • Build a Modern Website...
- Create Beautiful Toast Notifications with ReactJs: • Create Beautiful Toast...
- Create Modern Animated Search Bars Using HTML and CSS: • Create Modern Animated...
- Ecommerce Side Cart | Part 1/2 - Design using HTML, CSS & JavaScript: • Ecommerce Side Cart | ...
- Ecommerce Side Cart | Part 2/2 - Functionality using HTML, CSS & JavaScript: • Ecommerce Side Cart | ...
- Animated Menu Button Using HTML & CSS: • Animated Menu Button U...
- How To Build a React Animated Modal 2023 (Vite, CSS-Modules, Hooks): • How To Build a React A...
- How To Make Awesome Input Animation using HTML & CSS: • How To Make Awesome In...
- How to Create a Modern Login Form with Responsive Design using HTML and CSS: • How to Create a Modern...
- Simple Image Slider using HTML, CSS, and JavaScript: • Simple Image Slider us...
-----------------------------------------------------------------------------
Background Image: images.unsplash.com/photo-148...
-----------------------------------------------------------------------------
Font Awesome Cdn: cdnjs.com/libraries/font-awesome
Font Awesome Icons: fontawesome.com/icons
-----------------------------------------------------------------------------
Instagram: / webdevcreative_youtube

Опубликовано:

7 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 258

@webdevcreative Год назад

All source code: patreon.com/webdevcreative

@mokangibwalo8480 11 месяцев назад

merci

@Blacknarrates 9 месяцев назад

I’ve worked on mine and it’s working If you need the code I can share with you. Just reply. Thank you 👍

@rakeshgowda6187 9 месяцев назад

@@Blacknarrates please share

@theraveinformed 9 месяцев назад

@@Blacknarrates thank you

@danieledomani 8 месяцев назад

@webdevcreative the link is not opening

@kb5140 Год назад

Great video. Had no voice over but still explained everything flawlessly

@peaklegacy146 Год назад

The layout looks great but all of the shortcuts I learned from this astound me! Instant Sub!

@BomToxhall 7 месяцев назад

Such a simple design to follow along with, thanks a bunch!

@moonomanda4266 Год назад

I've been struggling with creative a functional navbar, thanks alot for this video 😭🙏

@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

@iamAbhi09 Год назад

Fabulous tutorial bro❤️❤️ I love it very much ❣️

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

@fredlaurent32 Год назад

Bravo nice job

@user-mm3xz3py9j Год назад

Good job. Nice design

@mrx4256 Год назад

brilliant videos...Thank you so much❤ Subscribed!

@juanrey922 Год назад

pocos minutos hiciste eso. eres un crack. nuevo suscriptor

@rhonoz1175 Год назад

Great tutorial, thanks!

@LilandCec 6 месяцев назад

Best! I use your videos for learning. Perfect, I understand everything without your explanation/speaking. I learn a lot, thanks to you 😊😊😊😊

@asiimwecalvin6893 8 месяцев назад

This is a great saver...Thank you soo much.

@jawidsaraj5914 Год назад

Marvelous

@sandra1761 Год назад

Good stuff, thanks a bunch!

@AlonePhilic 11 месяцев назад

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.

@portfedh 6 месяцев назад

This was great! Thank you!

@facundocruz8133 Год назад

awesome! 😁😁

@goodnessmaikoto5088 11 месяцев назад

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. 👏🏽

@kinglucky5122 9 месяцев назад

Thank you for creating this great video. ❣

@qkamil7481 Год назад

very helpful thanks

@TylerIngram 3 месяца назад

I appreciate the tutorial (even if it's not voiced over) I incorporated it into my little React project

@ohoLee Месяц назад

Thank you so much for this detailed complete video. You explained everything about mobile dropdown responsiveness here. Thanks alot. God bless you.

@88rakibmondal59 Год назад

great Video bro carryon and teach us more ❤❤

@lokeshbhardwaj2043 10 месяцев назад

good one

@yousefnidalmahdi8647 Год назад

well done man!

@AgrajDubey7 7 месяцев назад

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

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

@hatemalkhafaji7934 4 месяца назад

Thank you for sharing this video.

@HuyenNguyen-yq6wi Год назад

wowwwwww great

@user-zi5kl4dq6s 19 дней назад

Thank you, your video helped me so much to finish my work. I'm so grateful.

@Debjit_Adhikari 3 месяца назад

Thank you. It was so simple to understand.

@thawthaw1001 Год назад

Thz bro this is so easy n very nice ilysm

@jaazielcrb Год назад

Thanks man!

@aamonackerman8707 8 месяцев назад

The Background Music Is So Immersive

@sam-of7de Год назад

thanks mine worked perfect

@Cambridge478 14 дней назад

Thank you so much your video helped me a lot :)

@44aliano Год назад

Thank you brother

@marcosromanfernandez3760 7 месяцев назад

Thanks❤

@williamkakooza4603 6 месяцев назад

Thank you so much🙏

@steec3100 4 месяца назад

Hey! Great video as always 😁 I was just wondering, what web browser do you use?

@JCPMBENG 3 месяца назад

i love the design

@chouaibchouaib4819 Год назад

thank u ❤

@BidhaN... 9 месяцев назад

So satisfaction 😊

@aminashahid2818 10 месяцев назад

this tutorial is really helpful 😍Thanks🌼

@webdevcreative 10 месяцев назад

You're welcome!

@shikharsharma8355 21 день назад

Thank you very much !!

@jorgeivanmonterrosanarvaez9169 Год назад

Thanks so much

@isaeldiroche2415 Год назад

Tranks bro

@annafeledi7909 10 месяцев назад

thank you!!

@jadidalmagribi День назад

Great video

@ALi-Sloom 9 месяцев назад

Thanks!

@the_ansariii 2 месяца назад

Awesome video it really helped me 🚀👌

@prometheusreign5424 11 месяцев назад

Thank you.

@its_sunil658 Год назад

Thank you so much

@reeceslade4145 3 месяца назад

Great Video

@jannathanielausan4671 11 месяцев назад

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 8 месяцев назад

Mine Worked When I Removed The 'Overflow:Hidden' Attribute

@kbreditz3145 7 месяцев назад

@@johnexplorations272 mine also work but when I reload it automatically open

@marieswaranr2510 7 месяцев назад

I followed right and put the right syntax but My media query does not working what would I do

@johnexplorations272 6 месяцев назад

@@marieswaranr2510 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 5 месяцев назад

It worked. ty

@ahmedghallab5342 2 месяца назад

شكرا Thanks it was helpful

@kingannun9742 Год назад

awesome

@kingannun9742 Год назад

intenté hacerlo para una página mía pero no quedó igual

@Moralbr- Год назад

Muito TOP \o/

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

@vijaypandit17 Год назад

very helpfull

@webdevcreative Год назад

Glad to hear that

@mrak870 Год назад

Realy bro its helpfully in my project i just include this instruction thanks❤️

@ictlab1032 2 месяца назад

awesome 🥰

@sarimsheikh140 Год назад

Nice work bro

@lethe_yoon 9 месяцев назад

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 9 месяцев назад

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

@omerbabo 5 месяцев назад

thank you

@holiwis243 10 месяцев назад

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?

@agusarianto7484 3 месяца назад

thanks bro

@marvelworld5210 4 месяца назад

Thanku ❤

@user-zq5wq9pq9u 3 месяца назад

cool video)

@Phoquee 7 месяцев назад

tnx

@badiTeyeb4771 3 месяца назад

Good❤

@hungoan7699 Год назад

Actually it's beautiful because it has a pretty picture

@mercy6520 6 месяцев назад

Bro, what is your theme extension?

@amsalghur9109 7 месяцев назад

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.

@webdevcreative 5 месяцев назад

NEW Responsive Navbar NO JS! - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JEulHItO3UI.html

@karansalunkhe4799 11 месяцев назад

❤

@SatyamKumar-vr8im 2 месяца назад

Thanks

@poojansolanki9850 Год назад

What music is this? i loved it..

@Iollipop87 7 месяцев назад

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

@sahaskamble4467 7 месяцев назад

I really..... liked background music can anyone tell me which one is it

@ganeshgupta9692 Год назад

I m sleeping 😌😴 because of good 🎵 in background 😃 LMAO 😂

@narayanshrestha7814 Год назад

please teach hamburger responsive menu using js

@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 Год назад

same thing happened to me, did u find a fix?

@AtharvaVirpe1 11 месяцев назад

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☺

@blxckgamez1866 11 месяцев назад

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?

@teckwithyou8421 11 месяцев назад

where you learnt html css js ?

@bimbim1862 10 месяцев назад

how close navbar if widow click?

@guerreroHTRUJILLO 15 дней назад

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.

@Hs-iq3yr 24 дня назад

cann i add my self the js code?

@mr.joker3990 Год назад

How you resize the background image? how it is responsive?

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

@melvinnuslahdtuah269 10 месяцев назад

fine handwork. but i have an observation, how to make the nav bar disappeared when you click on a item😼

@CodesHub6784 10 месяцев назад

My bars are not showing, I've reduced the size of the screen, increased max width still not showing help!!

@modernmovies9937 Год назад

When I'm adding about us section after all this code so why my about us pic and text go up

@dharunraagav6844 Год назад

how much will this cost if you build the same page

@lesterjohnnaiz3970 11 месяцев назад

Hello thanks for this but how to you do that thing in time 2:09 when you fix the long font link.

@ganeshsriram4941 7 месяцев назад

Lines of code are just being formatted on hitting save. it is a setting in VSCode. (Search for Format On Save option in VSCode)

@osvaldoandrade_arquitecto 7 месяцев назад

Why create a div classed as navbar when you cab use navbar tag? Can you please explain?

@kja6336 6 месяцев назад

a class has precedence over a tagname

@thrishank Год назад

Hey my dropdown menu is not opening when clicking the toggle button. Can anyone help me out.

@hiimfelldev Год назад

instead using .onClick in script function, try this function: toggleBtn.addEventListener('click', () => { dropDownMenu.classList.toggle('open'); }

@marcellszucs2225 Год назад

mine too, did you get it?

@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 Год назад

@@marcellszucs2225 yis