Create a RESPONSIVE NAVBAR with sidebar animation (CSS ONLY)

[@pizzaguyaz]

You have no idea how useful this will be for me. I feel like I can write this from memory, now that I understand it all.

[@stratfanstl]

Amazingly useful demonstration. THANKS. For those having problems with your implementation getting "stuck" or looking "close" but not exactly as shown... Remember, CSS is like JavaScript. If anything -- ANYTHING -- is out of place, missing or lacking a comma or has a comma in a list where one doesn't belong, the parsing of the CSS just silently stops and the behavior you wanted with that style doesn't work. If something isnt working, check: 1) exact NAMES of styles, 2) exact names of entities within a style, 3) exact values / reserved words for entiteis , 4) check for commas in lists of valiues (some attriubtes USE commas, others DO NOT). All of these glitches can result in "half-working" HTML pages.

[@sergeys885]

I watched both your videos about CSS menu and love them. Using flexbox is much nicer than using floats and manual positioning. And using hidden checkboxes is interesting idea for pure CSS menu which can handle clicks without JS. Also it is possible to achieve similar results with using _:focus_ and _:focus-within_ pseudo-classes instead of checkboxes. If use it with _tabindex_ html attribute, it will possible to create pure CSS clickable dropdown menu which will work even without mouse, using keyboard _Tab_ and _Enter_ buttons only. The only problem of _:focus_ pseudo-class menu it will close only when you click on any other element, it will not close when click on element itself, because focus will not lost when clicking on an element itself.

[@stanleeifeanyi4986]

Bro God bless you. I wonder why you don’t have a billion subscribers menn you are too good! I hope the world recognizes your unique teaching!

[@DemetrioTorgan]

Thank you very much, I made this navbar as a React component and it worked perfectly.

[@gp9342]

Thank you for the great video. I have it up and running, and it works great for multiple-page websites. I am looking to use this technique on a single-page website that scrolls to the different sections. I will probably have to use a small JS script to close the menu after the user makes a selection.

[@aryankhandelwal15]

bro u r lifesaver i will gonna ask it in interviews 😂

[@Saadullahkhan3]

Use this line: width: clamp(fit-content, 300px, 100%); Instead of: width: 300px; In @media(max-width: 450px) This will make your nav bar more responsive and prevent overflow, like if window has only 250px, it will work! Must use it!

[@anudeepbj1496]

Very Cleary taught , amazing video .

[@coding2go]

Thank you!

[@frymc5351]

very helpful and well explained.thank you

[@herrenturnen]

Beautiful! This was exactly what I was looking for! Ty for the great tutorial.

[@PhonkCoding]

Your channel is one of the best for learning CSS tricks 😎💥

[@coding2go]

That's nice 😁Thank you!

[@MrX-cp8bo]

Thank you so much Fabian!

[@LukeDorny]

I would say make a newer version that is even more accessible and go with mobile first to reduce extra rules in media queries. Love the label outside method.

[@PicSta]

I wonder why you haven't used an ul for accessibility reasons in this video. Beside of that fact, it's well taught at a good pace everyone can follow with ease.

[@luigidabro]

Very helpful, when everything I know is back-end specific

[@engn5608]

thanks! its help a lot

[@Ultimateboat27]

its great bro realy helpfull thank you so much

[@FARAHDOU-o6s]

Thank you very much, your videos are very useful thanks again.

[@louloulala9954]

Thank you very much ! I have a question how do I keep the link "home" or logo for exemple in the desktop navbar (on the right) and not inside the sidebar ?

[@ElementoryMyDearWatson]

That was simply terrific!! Thank you so much for your generosity in sharing your skills and knowledge. Chalk up another subscriber!

[@sahinalam1761]

Just Amazing bro. Without Javascript 🥰🥰🥰

[@coding2go]

Glad you like it

[@abubacarrjawune4210]

You are amazing

[@hwangyeddeong5272]

thanks, this is really useful, ive been looking for nav bar like this! 💖💖💖

[@lilcranky9455]

LOVE YOUUUU BROO! Amazing video, excellent explained.

[@coding2go]

Glad you liked it!

[@medandcare]

Nvm, it works now. Just that my padding all crpped up. I can probably fix that after screwing around for a bit though.

[@ShauryaTushar]

You are underrated :(

[@clouddev.]

this helped me so much. tsm ❤

[@pablovasconcelos9394]

Great video!!! One ask, why do you always download SVG icons files from google, instead of using link + span code icon? Is it better?

[@Ibrahim_webdeveloper]

This is amazing buh could you add code of logo display by right side . Like how how was displayed in large screen

[@GorePulse]

nav {position: fixed;} shrinks the bar width.

[@wahyuwijayanto]

Bro, thank you for the tutorial. it works just perfectly on my desktop with minimized screen layout to simulate mobile device But when i open it in my mobile device , the hamburger menu is not responding to the touch and the sidebar wont open.. Could you please help me?

[@chaudharinirav5625]

i Loved your work and i find this much helpfull.....But here's a problem.when we give id to the respective nav links using href it will work properly in laptop or larger devices, but when it comes to mobile devices when we click on bar icon it will open side bar but when we click on any link it will be scrolled and we reached to that section but this side bar will remain as it is. normaly on productioin websites, when we click on any links, the side bar will closed and we reached to that perticular section. so please make a solution for this also this will help me and others as well.....I'm waiting for your replies.

[@coding2go]

I see... I think it is because my navbar tutorial was meant for websites that link to other html pages. If you link to a section within the same html page (to scroll down) you would need to implement some javascript logic to close the navbar. Since in this case the navbar depends on the sidebar-active checkbox, you would need to uncheck the checkbox when a bookmark link is clicked (Meaning when a link is clicked that will scroll down the page). So in your javascript code write a function function closeSidebar(){ document.getElementById('sidebar-active').checked = false } and then call the function in the onclick attribute of the bookmark links. About Hope that helps ✌️

[@vcareline]

🎉 great

[@islamown6394]

I give up it doesn't work from here to me 9:37

[@Sca4let]

how would I implement the side bar without the need for mobile. i just want a side display like KZbin has next to its logo. Thanks!

[@medandcare]

My navbar won't hide. I keep placing "display: none;" but it won't hide or go off screen.

[@lucasrodriguez7441]

A mi me pasa lo mismo. Solo se esconde si le doy al icono de cerrar, y me envía a la página de inicio. 🤷‍♂️ Lo has podido solucionar?

[@yehonamgeker]

Please, how do you make the home link on the navbar, join the other links to the right? Please help me

[@KymanieLouis]

are we still able to see the logo even when the screen is smaller

[@fahadfahad5835]

Bro I can't control the open and closing transaction speed why?

[@raja_roy47]

Use transition property

[@everydayisfriday2404]

I can't get the elements inside of the links-container class to align to the flex start When using media query , can anyone tell me what could be wrong with my code?

[@hectormartindama7371]

top

[@Tautviss777]

where do you find browser developers' tools?

[@coding2go]

The Browser Developer Tools can be opened by right-clicking a website and then "inspect". On Windows you can also use the short cut CTRL + SHIFT + I

[@Tautviss777]

@@coding2go thanks

[@elwolffy_6825]

and how you can close the sidebar whe you press the anchor element?

[@coding2go]

When you click an anchor element that links to another webpage (e.g., about.html), the browser reloads the entire page, effectively closing the sidebar. This is because the browser navigates to a new location and renders the new page from scratch, closing the previous page and its elements like the sidebar.

[@elwolffy_6825]

@@coding2go sorry i forgot to mention that my question is reffer to when you have anchors that link to another part of the same page, another div,class,id

[@lucasrodriguez7441]

@@elwolffy_6825tengo el mismo problema. Lo has podido solucionar?

[@muhammadyounusmorty6160]

can you share code?

[@Serean_Miles]

My menu icon (three line) got stucked in the middle of the nav bar. Can you please help me

[@coding2go]

Is it possible that you applied "justify-content: center;" in your nav element? This will center all the elements in your navbar (including the menu button). If you want your links to be centered but not your menu button, then you need to apply "justify-content: flex-end;" on your nav element inside the media query. Hope that helps ✌️ If you want the source code to compare it check out our website: coding-kurzundknapp.com/coding2go.html

[@Serean_Miles]

@@coding2go thank you!

[@gamerstube7543]

When we scroll down navbar goes upward so when we scroll the body scroll is stop and when we hide navbar then our scrolling work. Please help me in this

[@AXLtheOG]

The navbar itself is not fixed. So, if you scroll the body, it will go up. To achieve what you are trying to do, set the display of navbar to fixed and increase its z-index.

[@gamerstube7543]

@@AXLtheOG position:fixed; krne se navbar gaayab ho jaa rha h

[@AXLtheOG]

@@gamerstube7543 z index change krke dekho

[@kikimuguza5941]

I couldn't make it work because it wasn't made in a mobile first approach... 😢

[@aryankhandelwal15]

+1

[@WebDevXpert]

Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects: kzbin.info/www/bejne/jYesdH-Pi7p3m9U

[@KamilKrol-tx5vg]

after that } doesnt work like shut be

[@skully3661]

Same, which I don't get why. It's not like this tutorial is super old.