How To Make Responsive Navigation Bar Using Only HTML and CSS | Responsive Navbar Tutorial

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

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

50% 1

📁 Get the full project from here and support me 🥰👇
www.buymeacoff...
Hire a Web Developer on Fiverr: tahmids.net/Hi...
Join this Web Development Course: tahmids.net/We... (Access Premium Courses 30 Days for FREE)
Get Web Hosting from Hostinger: tahmids.net/Ho... (70% OFF)
Try Elementor: tahmids.net/Tr...
Web Design Elements in One Place: tahmids.net/En...
Best Online Deals: tahmids.net/Ap...
Other links: bio.link/tahmi...
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? 🚀

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

28 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@tahmidahmed-yt Год назад

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

@WildFire2028 Год назад

Now what I would like to see is how do you put the "Sign In and Register" in the menu as well.

@noobyxviii Год назад

Exactly! I think I will be making a tutorial myself on this very soon!

@iburu Год назад

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.

@hamodytube3681 Год назад

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

@alexandrusebastiancaprares5331 Год назад

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

@georgechatzopoulos8911 Год назад

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

@aqally0 Год назад

Tysm! I had problem with the menu but i fixed that ty!

@willisvensson Год назад

got the same problem, how did you fix this? Thankful for anwsers

@CodesHub6784 Год назад

what problem did you have pls and how did you fix it?

@willisvensson Год назад

I don't really understand the js code -> "menu.classList.toggle('bx-x');" Where does "bx-x" come from?

@willisvensson Год назад

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

@dev_ression Год назад

Great video as always bro!

@tahmidahmed-yt Год назад

Thanks a lot bro💟

@bandofbrotherbob1932 Год назад

যতক্ষণ নিঃশ্বাস আছে বাঁচুন, যতক্ষণ বেঁচে আছেন ভালোবাসুন। BAND OF BROTHER✅

@tahmidahmed-yt Год назад

Valobasha obiram brother✌️💟🤩

@esthercho5578 Год назад

I have no idea what javascript is, do I have to download it? Or can I just hop into VSC and start?

@nijamuddin799 Год назад

Great work easy to understand

@monkeydtan8677 Год назад

thank you so much. 😍😍

@tahmidahmed-yt Год назад

Most welcome🥰

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

I'm confused. Where did the open class came from?

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

broo its not working ...pls help

@musashefa-wy9qv Год назад

Helpfull tutorial

@bpmbeats Год назад

Good job

@tahmidahmed-yt Год назад

Thanks a lot!

@hazmieharith1638 Год назад

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.

@carrotcharm5277 Год назад

Hmm... why my javascript isnt working? the source is correct tho....

@Alphadec Год назад

I think there was javascript in there even you claim u did not use any.

@dykciak4256 Год назад

MOBILE FIRST

@dykciak4256 Год назад

@sethvybz Год назад

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 ?

@itihas_verma Год назад

same as i

@bandofbrotherbob1932 Год назад

যতক্ষণ নিঃশ্বাস আছে বাঁচুন, যতক্ষণ বেঁচে আছেন ভালোবাসুন। BAND OF BROTHER✅

@tahmidahmed-yt Год назад

😍😍😍

@darktechhub489 Год назад

Pls is code working. My menu isn't working

@tanweerasif_0476 Год назад

Hamburger menu toggle bar not working 🙄🤔.

@nahdig8yth233 Год назад

use poppins

@goodboys217 Год назад

Your Video title say it's only use HTML, CSS but you also use JS.That's so annoying.Please change it.

@georgechatzopoulos8911 Год назад

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

@hiryuimajin Год назад

Whats annoying is that people think they can get away of doing front end without JS lol!

@nachotagg Год назад

bro, it's literally copy and paste what he/she do, don't need to be an expert with JS in this case

@estacaotech Год назад

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

@georgechatzopoulos8911 Год назад

@@estacaotech if you're a complete beginner better find other solutions than watching some solutions on RU-vid. Enrolling in a course would be a much better option. These videos are taking for granted that most of the people watching already have some knowledge in front-end and either want to improve on something or forgot how to do it.

@mercee4097 Год назад

Pls create a website that authenticates products using serial number or bar code

@tahmidahmed-yt Год назад

Yes! Soon

@muhamadanjas3497 Год назад

the sound like i'am enjoying to code everytime

@tahmidahmed-yt Год назад

Glad you enjoy it!

@ravish8620 Год назад

Sir, If you make it with voice over that would be more amazing❤️

@takoyaki7197 Год назад

I think this way is better since some voices are unbearable

@binchona Год назад

Hello, the menu does not open when I click the icon

@holiday157 Год назад

pls help me on clicking the menu icon the navbar is not displaying

@w.edesign8515 6 месяцев назад

yes me to

@Adziwo Год назад

Hey ! The menu is not displayed, the X button is displayed but not the small menu. How to do ? Thanks you in advance !

@ericholland_LTD Год назад

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!

@ender2543 Год назад

That required a little bit of Javascript, but good job with the design!

@tahmidahmed-yt Год назад

Thanks a lot!!

@godgiftafo8984 Год назад

I can’t find the class “open” on the html, but I see it on the css and js page

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

Yeah, experiencing the same?how did you change then?

@liamcain18 Год назад

the js code dies not open the dropdown on mobile - it was working very well until the jave bit, can you help

@WildFire2028 Год назад

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.

@fahrettinpasha1916 Год назад

@@WildFire2028 hi my friend, I made the same mistake thank youu

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

@@WildFire2028 same mistake bro btw thank you

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

Great video, however, I've got a problem. My hamburger icon doesn't show any navigation content when I click on it. I followed the exact same code but ultimately it ended up being unable to load the content of the navigation bar.

@tahmidahmed-yt 18 дней назад

It sounds like you're dealing with an issue where the hamburger menu isn’t revealing the navigation content as expected. Here are a few troubleshooting steps you can try: Check JavaScript: Ensure that your JavaScript code responsible for toggling the navigation content is functioning correctly. Look for any errors in the browser’s console (press F12 or right-click > Inspect > Console tab). Verify Event Listeners: Make sure the event listener for the hamburger icon is properly set up. It should be linked to the function that toggles the visibility of the navigation content. CSS Classes: Check if the CSS classes responsible for showing and hiding the navigation content are being applied correctly. Sometimes, missing or incorrect classes can prevent the content from appearing. HTML Structure: Confirm that the HTML structure is correct and that the navigation content is correctly placed within the container that’s being toggled. Check for Overlapping Elements: Sometimes other elements might be overlapping or covering the navigation content. Use the browser’s developer tools to inspect the layout. Test in Different Browsers: Occasionally, browser-specific issues might cause problems. Test the functionality in different browsers to see if the issue persists. If you can share some of the code or describe the implementation in more detail, I might be able to offer more specific advice!

@413XUIFC Год назад

"Using Only HTML and CSS"

@syedayanata9765 Год назад

lol

@Duckyou101 Год назад

bro the menu icon is not responsive what shall i do

@daf80 Год назад

Y donde esta el archivo javascript?

@nijamuddin799 Год назад

It was really helpful tutorial thanks man

@tahmidahmed-yt Год назад

Welcome man

@ephraimetuk9670 Год назад

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

@tahmidahmed-yt Год назад

First, you check if your javascript file is linked or not Or check the box icons link!!

@7themryze638 Год назад

Did u figure out? I have the same issue. Hope you can help me. Thanks

@Adziwo Год назад

@@tahmidahmed-yt Hello, same problème, Do you have a solution ? Thanks in advance

@hillaryrodriguezgrullon990 Год назад

@@Adziwo I have the same problem

@akbarpratama840 Год назад

just add .open ( right : 0%; ) in @media(max-width: 1090px)

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

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

@freaknikesh Год назад

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 🤕

@7themryze638 Год назад

I m having the same issue :((

@freaknikesh Год назад

@@7themryze638 I fixed my problem by changing it's colour to white.

@Adziwo Год назад

@@freaknikesh My menu does not appear even by clicking on X, do you know why?

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

Where i am write a open 😢😢😢

@albertofernandezsenovilla9934 Год назад

If it doesn't work it might be because you didn't close the .

@gianbalan75 Год назад

where can i get the java script code?

@tahmidahmed-yt Год назад

Please check video description

@akbrgrowth4003 Год назад

thanks man

@tahmidahmed-yt Год назад

Most Welcome Man!!

@dykciak4256 Год назад

YOU CALL YOURSELF A "WEB DEVELOPER". It's funny

@mahfujrahman9789 Год назад

Thank you so much for your kind work ❤

@tahmidahmed-yt Год назад

You are so welcome

@eusoukarlacardoso Год назад

Thanks! I really love to make this! =D

@tahmidahmed-yt Год назад

Most welcome!

@NobleAscent Год назад

Pls give me source code

@tahmidahmed-yt Год назад

Please check video description!!

@charanpreetsinghjaswal8007 Год назад

video with proper voiceover would be much better

@nijamuddin799 Год назад

Great tutorial

@tahmidahmed-yt Год назад

Thank you!

@abdiendik8152 Год назад

thx and subscribed

@tahmidahmed-yt Год назад

Welcome❤❤

@Royal6969 Год назад

you forgot the js function to change the active status for tags

@snowroot Год назад

can you explain how to do it

@guilhermefrank4895 Год назад

really cool !!!!!!!!!!!!

@tahmidahmed-yt Год назад

Thanks a lot🥰

@shianblues3166 Год назад

thanks

@tahmidahmed-yt Год назад

Most welcome

@awaiskashif6988 Год назад

What is the use of bx-x property

@baghiedits Год назад

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;