How To Make Responsive Navigation Bar Using Only HTML and CSS | Responsive Navbar Tutorial
HTML-код
- Опубликовано: 10 окт 2022
- 📁 Get the full project from here and support me 🥰👇
www.buymeacoffee.com/tahmidah...
Hire a Web Developer on Fiverr: tahmids.net/HireWebDeveloper
Join this Web Development Course: tahmids.net/WebDevelopmentCourse (Access Premium Courses 30 Days for FREE)
Get Web Hosting from Hostinger: tahmids.net/Hostinger (70% OFF)
Try Elementor: tahmids.net/TryElementor
Web Design Elements in One Place: tahmids.net/EnvatoElements
Best Online Deals: tahmids.net/AppSumo
Other links: bio.link/tahmidahmed
In this video, I have shown you how to make a responsive navigation bar using HTML and CSS step-by-step
If you are interested to learn How to make a beautiful navbar using HTML CSS and Flexbox step-by-step - this video is for you.
If you follow this video tutorial - you will be able to make a beautiful navigation bar like it is shown in the video or you can make your own design.
✌ Please make sure you watch this video till the end.
Tutorials mentioned in the video: want to learn how to Create a Personal Portfolio Website With HTML & CSS click here--: • How To Create Personal...
Full Personal Portfolio Website: • Build a Complete Perso...
about us page: • How To Create A About ...
Freelancer Personal Website: • Complete Personal Port...
Navbar HTML CSS : • Simple Navbar With Fle...
▷ Find more videos about web development: • Website with HTML & CSS
For more HTML, CSS, and coding tutorials - please click on the link below to subscribe to my channel:
/ @tahmidahmed-yt
✨ Like our works and want to support us? 🚀 
Хобби
Hire a Web Developer on Fiverr: tahmids.net/HireWebDeveloper
Join this Web Development Course: tahmids.net/WebDevelopmentCourse (Access Premium Courses 30 Days for FREE)
Get Web Hosting from Hostinger: tahmids.net/Hostinger (70% OFF)
Try Elementor: tahmids.net/TryElementor
Web Design Elements in One Place: tahmids.net/EnvatoElements
Best Online Deals: tahmids.net/AppSumo
Other links: bio.link/tahmidahmed
Thank you,
Tahmid
At first I was annoyed that you weren't talking, but after watching a few seconds, I realized this would be a good video and it was. Thank you. This video is long (understandably), but if you were explaining everything, that would've made it even longer. Great vid easy to follow along. Thanks again.
the sound like i'am enjoying to code everytime
Glad you enjoy it!
Thank you so much for helpful tutorial👍👍
Great work easy to understand
Tysm! I had problem with the menu but i fixed that ty!
got the same problem, how did you fix this? Thankful for anwsers
what problem did you have pls and how did you fix it?
Bro, Where do you get those kinds of images? The one you have in the video Miniature ?
Thanks! I really love to make this! =D
Most welcome!
It was really helpful tutorial thanks man
Welcome man
Great video as always bro!
Thanks a lot bro💟
Awesome work!!
Thanks
Glad you liked it!
Thank you so much for your kind work ❤
You are so welcome
Now what I would like to see is how do you put the "Sign In and Register" in the menu as well.
Exactly! I think I will be making a tutorial myself on this very soon!
my toggle button is working but it is not displaying the toggle menu and i think it gas something to do with the .open{} class. Please where is that class linked to ?
same as i
thank you so much. 😍😍
Most welcome🥰
Sir, If you make it with voice over that would be more amazing❤️
I think this way is better since some voices are unbearable
Helpfull tutorial
Great content, great video, everything is smooth. Thanks buddy🥰😇
Glad you enjoyed it
Can you give me a source code please
@@karanchavda1816 Pause the video to get that👍😄
highly appreciated!
Thanks a lot!
Is your code working
My menu bar isn't working
I have no idea what javascript is, do I have to download it? Or can I just hop into VSC and start?
Great tutorial
Thank you!
really cool
!!!!!!!!!!!!
Thanks a lot🥰
Hello, my menu is not working, when it is in the mobile function it does not open, everything is linked but I don't know where the error is, please help me
thanks man
Most Welcome Man!!
What is the use of bx-x property
That required a little bit of Javascript, but good job with the design!
Thanks a lot!!
thx and subscribed
Welcome❤❤
bro the menu icon is not responsive what shall i do
you forgot the js function to change the active status for tags
can you explain how to do it
I don't really understand the js code -> "menu.classList.toggle('bx-x');"
Where does "bx-x" come from?
because even if the code looks exactly the same, the menu func won't work.
Somethings wrong with the js or code errors, I'm really frustrated
Thank you
You're welcome
Y donde esta el archivo javascript?
pls help me on clicking the menu icon the navbar is not displaying
yes me to
Bro Logo name not coming beside round image
How to add list under the navebar..
I can’t find the class “open” on the html, but I see it on the css and js page
Yeah, experiencing the same?how did you change then?
hello there, beautiful video. the toggler doesn't work. it doesn't display the navbar on smaller screens. probably there's something I'm missing. when i click the menu button it changes to an 'X' but no display of the navbar
First, you check if your javascript file is linked or not
Or check the box icons link!!
Did u figure out? I have the same issue. Hope you can help me. Thanks
@@tahmidahmed-yt Hello, same problème, Do you have a solution ? Thanks in advance
@@Adziwo I have the same problem
just add .open ( right : 0%; ) in @media(max-width: 1090px)
thanks
Most welcome
Hello, the menu does not open when I click the icon
the js code dies not open the dropdown on mobile - it was working very well until the jave bit, can you help
Liam, I had to closely look at the java code and the 1 mistake was that I put a capitol C on: menu.onClick = () => { when it should have been a lower case letter c: menu.onclick = () => {. once I did the change, it worked.
@@WildFire2028 hi my friend, I made the same mistake thank youu
@@WildFire2028 same mistake bro btw thank you
can i know how to make the navigation bar button (e.g home, about, service) fixed at the same position even when i remove register or sign-in button? i want to make when login, the reg and log in button disappear but the navigation bar button still at the same place.
Hey ! The menu is not displayed, the X button is displayed but not the small menu. How to do ? Thanks you in advance !
Hey, so I think he is getting the images from a place called font awesome. You can google that and see that it is incredibly useful. Hope this helped!
Good job
Thanks a lot!
Hamburger menu toggle bar not working 🙄🤔.
use poppins
Why js doesn't work while l am sure that it's written correctly
Is there a way just to link it with the html ot what
try to write the code directly in your html page using , it didn.t work for me untill i did it this way. I think there is something wrong with the class
Your JS may not be linked or you placed your script tags too high. They should be on the bottom of the page and link correctly
The menu bar didn't appear in any case as i insert div tag with class of bx bx-menu and id as menu-icon or something, i expected to see any icon like as you shown but I fail 🤕
I m having the same issue :((
@@7themryze638 I fixed my problem by changing it's colour to white.
@@nikeshbedari9479 My menu does not appear even by clicking on X, do you know why?
I learn more videos on your channel...i want UI framework can you any tips give me
যতক্ষণ নিঃশ্বাস আছে বাঁচুন, যতক্ষণ বেঁচে আছেন ভালোবাসুন। BAND OF BROTHER✅
Valobasha obiram brother✌️💟🤩
Pls create a website that authenticates products using serial number or bar code
Yes! Soon
Tahmid Ahmed sir me pura responsive banaya magar menu rights aa ni raha jabi me humbarger pr click krta ho tu sirf xmark ka hi icon at he !
Sir help me;
same problem
how to add hover effect to nav links (HOME, CONTACT etc...) it doing for whole top section logo, nav and login...
not just color but something cooler
@@Lukas13901you would need some knowledge of js
why is the @media code not working? im using visual studio code
try ;
@media screen and (max-width: 1090px){
}
wow....
Thankss
If it doesn't work it might be because you didn't close the .
where can i get the java script code?
Please check video description
broo its not working ...pls help
where's .open?
I'm confused. Where did the open class came from?
Салам алейкум брат, сложно было, но я повторил, и уменя получилось, альхамдулилля)
Ualaikum SALAM masha Allah BROTHER
🥰🤩
what does this mean "--"?
Where i am write a open 😢😢😢
Hmm... why my javascript isnt working? the source is correct tho....
I think there was javascript in there even you claim u did not use any.
video with proper voiceover would be much better
Pls give me source code
Please check video description!!
MOBILE FIRST
IT DOESNT WORK
Your Video title say it's only use HTML, CSS but you also use JS.That's so annoying.Please change it.
Ya bro
Bro that little JS isn't a big deal. If your try to make this navbar with only html and css you'll suffer. You will have to make a lot more code. Just learn a little bit of JS and use it
Whats annoying is that people think they can get away of doing front end without JS lol!
bro, it's literally copy and paste what he/she do, don't need to be an expert with JS in this case
@@georgechatzopoulos8911 I mean, people who are learning front end starts with just HTML/CSS, even if it takes more lines of code to do something, to just learn JS after they are coding in HTML/CSS by themselves, then after that its common to learn SAAS and JS, and even other ways to make things simpler, but if you put in the title "HTML, CSS ONLY" then its something to consider.
"Using Only HTML and CSS"
lol
L
YOU CALL YOURSELF A "WEB DEVELOPER". It's funny
free code ?
Check the video description
যতক্ষণ নিঃশ্বাস আছে বাঁচুন, যতক্ষণ বেঁচে আছেন ভালোবাসুন। BAND OF BROTHER✅
😍😍😍
Pls is code working. My menu isn't working
MOBILE FIRST