Тёмный

Responsive Nav Bar Tutorial | HTML CSS JS Flexbox Navigation Menu 

FollowAndrew
Подписаться 45 тыс.
Просмотров 179 тыс.
50% 1

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

 

30 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 142   
@naziruadam3950
@naziruadam3950 3 года назад
That "order" rule was very handy! I never used it before! Thanks for the thorough explanation.
@bruceclark2277
@bruceclark2277 2 года назад
Thanks for this - I have completed my navbar! Now back to the make your own wordpress theme - hopefully I can incorporate it!
@Brandon-sr4qp
@Brandon-sr4qp 4 года назад
Great tutorial, thanks! This is the navbar I've been wanting to learn, particularly the functional hamburger menu.
@Gschibby
@Gschibby Год назад
Great tutorial, and a great teacher! I really appreciate how you explain the thought process behind what you do and why you do it. I'm fairly new to web-development, but I could still easily follow along the video.
@drewstifler1440
@drewstifler1440 5 лет назад
Very informative! Man, do a tutorial of making a page using Flexbox and Grid together. People make dramas of Flexbox vs Grid where in fact they can be used together.
@oswhytecodes1
@oswhytecodes1 2 года назад
Damn you’re good 🤯🤯 your css nav tutorial was so good. I built 2 back to back. I didn’t even use floats and clears either, your tutorial was so easy to comprehend that I was able to change it around. Can’t wait to try this JS button !!!
@FollowAndrew
@FollowAndrew 2 года назад
Awesome! You'll be there in no time!
@jonathanel-aziz2208
@jonathanel-aziz2208 2 года назад
Muchas gracias, estoy adentrándome al mundo del flexbox , estoy en un proyecto y ésto era lo que me faltaba hacer.
@rishabkumar5656
@rishabkumar5656 4 года назад
Great Video. This is the first time I have created an responsive navbar and I learnt it the right way. Thanks Mate!!
@mhhamzaedits
@mhhamzaedits Год назад
bro Your language i am not uderstandig but your work is i understandig. beacuese i am INDIAN 🇮🇳. Good work bro. Thank You for you tech us. I speak little inglish.
@brett3554
@brett3554 3 года назад
I learned a ton from this tutorial thank you
@djjonnas
@djjonnas 4 года назад
Thanks, now I've learnt how to make a great nav bar
@babygrandadplays
@babygrandadplays 11 месяцев назад
amazing tutorial, I really appreciate the time you took to give us lessons
@mhhamzaedits
@mhhamzaedits Год назад
you are teaching GREATFULL love you bro
@icarokiilermelo
@icarokiilermelo Год назад
Very good man, it help-me a loot to understand some concepts and techniques of responsive layout
@echuderewicz
@echuderewicz Год назад
Thanks. Nice presentation.
@demaiainkediri6724
@demaiainkediri6724 2 года назад
The best method, I recommend
@mikersson
@mikersson Год назад
Super clean and simple result and very well explained!!! Thank you so much!!!!!!!
@JenniferHernandez-c2l
@JenniferHernandez-c2l 9 месяцев назад
really easy tutorial to follow, thank you! I do have a question - how would i be able to put the logo in the center?
@prasanthvaindam7113
@prasanthvaindam7113 3 месяца назад
Thank you sir, for your patience , it is a very good tutorial, may i know is their any special reason to use jQuery?
@amazongirlsfitness4370
@amazongirlsfitness4370 4 года назад
A comment, at the logo class style, add {width: fit-content;} to adjust the logo to own content, garantee not accidentally clicking logo on empty space at nav bar. Thanks #FollowAndrew Very good tutorial
@FollowAndrew
@FollowAndrew 4 года назад
Good tip.
@morphetowusu1785
@morphetowusu1785 3 года назад
Andrew this is tutorials great !! but I would be pleased if you go further on flexbox.. it' s very tricky.
@cemwstone
@cemwstone 5 лет назад
Nice sampling Andrew. Thanx
@abderrahmenebenounene6481
@abderrahmenebenounene6481 2 года назад
here is a vanilla javascript implementation: var toggle = document.querySelector('.toggle') var items = document.querySelectorAll('.item') toggle.addEventListener('click', () => { Array.from(items).forEach((item) => { item.classList.toggle('active') }) })
@ericaruiz6707
@ericaruiz6707 4 года назад
thanks! Medellín- Colombia, great tutorial
@wandavazquez3201
@wandavazquez3201 4 года назад
Best tutorial I've followed. Excellent.
@miriamjurkova3623
@miriamjurkova3623 4 года назад
Great video! but u have there some mistakes instead of items u have to write item in order to work properly... .item.active { display: block; }
@maikwolfram
@maikwolfram Год назад
Thank u sooooo much …. That was a brilliant tutorial !!!
@Shesfantaa
@Shesfantaa Год назад
i love youuu, thankkk youuu saveeeeddd meee
@prakash1to7
@prakash1to7 4 года назад
Nice explanatory Video Andrew. please post similar videos.
@FollowAndrew
@FollowAndrew 4 года назад
More to come!
@ndindacodes
@ndindacodes 3 года назад
Thank you so much. I Enjoyed this tutorial and learnt a lot
@FollowAndrew
@FollowAndrew 3 года назад
You bet!
@richardsambo283
@richardsambo283 3 года назад
Thanks Andrew. Great tutorial, that was super helpful. 👍
@FollowAndrew
@FollowAndrew 3 года назад
Great to hear!
@deviljinx45
@deviljinx45 2 года назад
Thank you very much this help me alot :)
@gsshaykot3824
@gsshaykot3824 3 года назад
very informative with practical,please make the menu animated in mobile view....something like when we will click the hamburger icon than the items will appears from top to bottom with some transitio.
@johnlloydmoreno9517
@johnlloydmoreno9517 3 года назад
THANK YOU YOU JUST HELP OUY FOR MY FINAL PROJECT
@FollowAndrew
@FollowAndrew 3 года назад
Do I get like bonus points or something?
@samsar7
@samsar7 4 года назад
Very Good Tutorial.learned many things.thank you!
@FollowAndrew
@FollowAndrew 4 года назад
You bet!
@guillermorodriguez8916
@guillermorodriguez8916 3 года назад
this was really helpful! Thanks for your excellent tutorial!
@FollowAndrew
@FollowAndrew 3 года назад
Glad it was helpful!
@MohdAmirAnsari9699
@MohdAmirAnsari9699 4 года назад
That was really very amazing! Quite informative!
@yassinabdulla368
@yassinabdulla368 3 года назад
thanks for this video l learn too from it
@penguinab
@penguinab 3 года назад
Thank you for this tutorial! Easy to follow and learn :)
@sleepingdogpic5850
@sleepingdogpic5850 Год назад
hello, thank you very much for this tutorial -- is there any way to add submenu dropdowns?
@debasishgracias757
@debasishgracias757 3 года назад
Great tutorial! very helpful.
@joshuanithasvillanueva9143
@joshuanithasvillanueva9143 2 года назад
How would we add a transition to this nav bar? thank you so much for the video! I'm making a website for my wedding :) helps out a lot!
@dotsysdev4775
@dotsysdev4775 4 года назад
Very informative , very useful and well explained ! Thank you ! Have a nice year :)
@fatemealhoseini4493
@fatemealhoseini4493 4 года назад
perfect tutorial , Thank u deeeeply!!!
@bandhdhdh7188
@bandhdhdh7188 2 года назад
How to animate a menu like this?
@cybersamurai99
@cybersamurai99 Год назад
just the li*7>a is worth the subscription, amazing thank you for sharing!
@SudiptaRoyGaming
@SudiptaRoyGaming 3 года назад
Thank You Verry Much Sir.❤
@programmingempire9306
@programmingempire9306 2 года назад
Please! I need your help with this step. How to move the Sign Up button lite further more to the side and keep the Login button withe menu?? Every time try to do that, the Login button is moving as well which's not what want.
@doni654321
@doni654321 Год назад
I need help with mine, I done nav bars before but I am having trouble on this one. its with mega menu
@Bielito92
@Bielito92 4 года назад
Very Good, im from Brasil and I loved your content!
@eduardoaugusto2443
@eduardoaugusto2443 2 года назад
Fixed top nav bar with dropdown and responsive, please :3
@DOTRIN
@DOTRIN 3 года назад
Great tutorial, thanks a lot
@maya34
@maya34 4 года назад
Great video! Thank you so much. :)
@alessandramedeiros8225
@alessandramedeiros8225 Год назад
Thanks so much!
@FollowAndrew
@FollowAndrew Год назад
You're welcome!
@peixian2901
@peixian2901 4 года назад
Great tutorial! like your video! Thanks!
@MiguelKali6g
@MiguelKali6g 5 лет назад
Saludos desde Perú 😃 🇵🇪
@FollowAndrew
@FollowAndrew 5 лет назад
Que bien!
@doni654321
@doni654321 Год назад
didn't work here, because I am already working with a massive nav bar megamenu, any help would be appreciated
@georgesaunders3532
@georgesaunders3532 4 года назад
Is the best way to align the hamburger menu icon better to set the top to -5 and -10 respectively on the before and after pseudo elements or is there a betrer way?
@Pareshbpatel
@Pareshbpatel Год назад
An excellent tutorial on responsive design. Thanks. Andrew. {2023-01-16}
@justinroydmaquiran3344
@justinroydmaquiran3344 2 года назад
What extension do you use in your live preview?
@mihirsarvaiya9389
@mihirsarvaiya9389 3 года назад
Javascript is not working on webpage can't output javascript code in web page tell me what I do?
@og_avocado
@og_avocado 4 года назад
You deserve more subs
@jasonstack397
@jasonstack397 3 года назад
loved the video. Really helpful tutorial. Does anyone know how i could animations so when the hamburger menu is clicked it has a transition effect. Would this be done using JavaScript or css and how should i go about implementing it?
@salemshehabeddin7638
@salemshehabeddin7638 3 года назад
Hello Andrew, thank you for always uploading informative video. I have a problem in this exercise. order property is not working, and when I apply the width 100% to menu items nothing changes.
@etse_tma
@etse_tma 3 года назад
thanks man
@RajeshKumar-uw9qi
@RajeshKumar-uw9qi 5 лет назад
Awesome work...
4 года назад
thank you man. love you
@brianjett1446
@brianjett1446 2 года назад
I have a question how would I create this in php? it works great in HTML yet I have an ideal that might work. I'm just asking for now I don't wanna screw anything up while I'm coding.
@kenthefley2226
@kenthefley2226 4 года назад
On which element would you add the transition if you wanted to the menu toggle effect to be smoother?
@rssimran4800
@rssimran4800 4 года назад
Awesome tutorial....
@bitcoinblockchain431
@bitcoinblockchain431 4 года назад
where is the wistle ?
@FollowAndrew
@FollowAndrew 5 лет назад
Version w/o JS: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-sjrp1FEHnyA.html
@photoinshot1355
@photoinshot1355 3 года назад
Thanks for a great tutorial, how would you make the selected nav link, so it shows as another colour? There are a lot of tutorials out there about responsive nav bars, but I have not seen one that shows how to show an active link, so the visitor knows which page they are on.
@MrMarcoAlvarado
@MrMarcoAlvarado 4 года назад
Hi Andrew, amazing video, easily comprehensible! One questions: Why do you use position:absolute for the pseudo-elements and not position:relative (toggel button)? Thanks!
@shivaniraj7738
@shivaniraj7738 4 года назад
so the toglle button will be responsive and wont move from iits position
@chandarayi5673
@chandarayi5673 4 года назад
Who knows how to activate that browser preview? cos I cant do that on VSC
@chandarayi5673
@chandarayi5673 4 года назад
cPwtQfzCZXMAcHjexz yeah I did install it but when I click Open previews it doesn’t link to my html and css webpage
@chandarayi5673
@chandarayi5673 4 года назад
cPwtQfzCZXMAcHjexz it was blank
@ktron4144
@ktron4144 4 года назад
Great tutorial. Would you normally include the logo in the unordered list or should it be in an anchor and img tag?
@FollowAndrew
@FollowAndrew 4 года назад
Thanks! Typically probably the anchor and img tag as you mentioned.
@bukqueiroz
@bukqueiroz 3 года назад
thanks bro
@lunatite6451
@lunatite6451 5 лет назад
Great tutorial!
@ChallengeMeBROO
@ChallengeMeBROO 3 года назад
My hamburger menu isn''t working. I have no idea why, I copied your code exactly. My items have getting the active class when I click on them but nothing appears. Also when I remove display: none from the items in the css, it still doesn't appear, which makes absolutely no sense. I rewatched the video twice, and my css code is the same. Any ideas what is wrong with my code?
@JackieBuckleyphilly5
@JackieBuckleyphilly5 4 года назад
Thanks for the tutorial, the best. I just has one problem. I am using brackets and in javascript they consider const an error. This is how it is worded ERROR Pausing error The keyword const is reserved.
@SonnyBurnett2012
@SonnyBurnett2012 4 года назад
Thank you!
@FollowAndrew
@FollowAndrew 4 года назад
You bet!
@rbengrid23
@rbengrid23 4 года назад
Bonjour, Très bon cours Merci
@imranmughal2215
@imranmughal2215 4 года назад
sir i have a question i am trying to create a responsive navbar in flex using only css. But that is not working on mobile view i mean when i click the toggle it is not appearing can you please tell me what is the problem?
@zw3015
@zw3015 Год назад
how can i do it with no jquery pls help
@jlm97jlm
@jlm97jlm 4 года назад
How would you go about making home about and services centered in the desktop view?
@FollowAndrew
@FollowAndrew 4 года назад
You could wrap those in an additional wrapper and then that single div could be centered via Flexbox with the logo and login areas...
@RanjeetkumarYadav
@RanjeetkumarYadav 4 года назад
Content is getting pushed down when the menu is active(showing). How do we solve that ?
@nicdemus-rc7gc
@nicdemus-rc7gc 5 лет назад
Really nice tutorial buddy, thanks, I ditto the comment making the nav with flex and grid but eh we have to do some work ourselves! I am on that now but like the guy below that would be cool! Have a great day ;D
@adrianiosif6657
@adrianiosif6657 3 года назад
hi. i did everything, but when i press the 3 bars menu....doesn't open anything. would you know what could be the problem. ? I went step by step...hmm..
@adrianiosif6657
@adrianiosif6657 3 года назад
by the way...thanks for the video..great video
@2002budokan
@2002budokan 4 года назад
Follow Andrew, you'll never regret! 👍
@muhammadmahdi8938
@muhammadmahdi8938 3 года назад
thank you .. :D
@ImproveProgrammingLogic
@ImproveProgrammingLogic 3 года назад
Nice
@andrewsinelnikov2307
@andrewsinelnikov2307 4 года назад
Thank you
@next_luke
@next_luke 4 года назад
Hi, how i can display my menu items on the left, next to the logo?
@mateuszsawczuk7252
@mateuszsawczuk7252 4 года назад
How did you make website automatic refresh? Is it some kind of IIS or Node feature?
@FollowAndrew
@FollowAndrew 4 года назад
Live Server plugin in VS Code
@anuwatavara1423
@anuwatavara1423 4 года назад
Thank you so much
@girlingame518
@girlingame518 4 года назад
so neat
@theye.shutter
@theye.shutter 5 лет назад
what application do you use ? Like sublime?
@FollowAndrew
@FollowAndrew 5 лет назад
VS Code
@sujuevigirls2071
@sujuevigirls2071 2 года назад
thank you very much for posting crack without viruses
@justsomeguy2759
@justsomeguy2759 4 года назад
Do this navbar actually work on a mobile device? I've followed so many videos that use body {overlflow-x: hidden} to hide the menu which doesn't work on mobile devices.
@ogwurupatrick5641
@ogwurupatrick5641 4 года назад
Add it within your body style, like: html,body{ overflow-x: hidden; } It does well to prevent horizontal scroll on mobile screen sizes.
@md.obidullah6415
@md.obidullah6415 4 года назад
great.!!!
Далее
Responsive Pure CSS Menu Tutorial (No Javascript)
43:13
Avaz Oxun - E'lon, erga tegaman!!!
11:47
Просмотров 254 тыс.
Animated Sticky Header | Sticky Navbar on Scroll - CSS
19:41
CSS Flexbox Tutorial - Learn the right way
35:41
Просмотров 8 тыс.
Pure CSS Hamburger Menu & Overlay
35:47
Просмотров 399 тыс.
HTML Tables Tutorial with CSS Styling - Crash Course
29:03
Responsive navbar tutorial using HTML CSS & JS
49:25
Pure CSS tree view with custom tree icons
31:34
Просмотров 21 тыс.