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.
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.
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.
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 ?
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.
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.
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?
you can use a js-library like radix-primitive for this (in order to be accessible) but you can easily adapt from the video example (which focus on css)
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.
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 ✌️
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?
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.
@@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
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
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
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.
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.
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.
bro u r lifesaver i will gonna ask it in interviews 😂
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.
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!
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.
very helpful and well explained.thank you
Very Cleary taught , amazing video .
Thank you!
Beautiful! This was exactly what I was looking for! Ty for the great tutorial.
Very helpful, when everything I know is back-end specific
Thank you so much Fabian!
Your channel is one of the best for learning CSS tricks 😎💥
That's nice 😁Thank you!
Just Amazing bro. Without Javascript 🥰🥰🥰
Glad you like it
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 ?
That was simply terrific!! Thank you so much for your generosity in sharing your skills and knowledge. Chalk up another subscriber!
its great bro realy helpfull thank you so much
Thank you very much, your videos are very useful thanks again.
LOVE YOUUUU BROO! Amazing video, excellent explained.
Glad you liked it!
thanks! its help a lot
thanks, this is really useful, ive been looking for nav bar like this! 💖💖💖
nav {position: fixed;} shrinks the bar width.
Great video!!!
One ask, why do you always download SVG icons files from google, instead of using link + span code icon?
Is it better?
You are amazing
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.
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.
You are underrated :(
This is amazing buh could you add code of logo display by right side . Like how how was displayed in large screen
this helped me so much. tsm ❤
Nvm, it works now. Just that my padding all crpped up. I can probably fix that after screwing around for a bit though.
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?
how would I implement the side bar without the need for mobile. i just want a side display like TH-cam has next to its logo. Thanks!
This solution is not accessible! Please do not use this checkbox trick for navigation toggles! Use the W3C Disclosure Pattern.
That's exactly what I wanted to know; if it's accessible or not. Saved my 5 minutes
15*
you can use a js-library like radix-primitive for this (in order to be accessible) but you can easily adapt from the video example (which focus on css)
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.
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 ✌️
🎉 great
Please, how do you make the home link on the navbar, join the other links to the right? Please help me
are we still able to see the logo even when the screen is smaller
I give up it doesn't work from here to me 9:37
My navbar won't hide. I keep placing "display: none;" but it won't hide or go off screen.
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?
Bro I can't control the open and closing transaction speed why?
Use transition property
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?
can you share code?
and how you can close the sidebar whe you press the anchor element?
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.
@@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
@@elwolffy_6825tengo el mismo problema. Lo has podido solucionar?
where do you find browser developers' tools?
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
@@coding2go thanks
My menu icon (three line) got stucked in the middle of the nav bar. Can you please help me
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
@@coding2go thank you!
I couldn't make it work because it wasn't made in a mobile first approach... 😢
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
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.
@@AXLtheOG position:fixed; krne se navbar gaayab ho jaa rha h
@@gamerstube7543 z index change krke dekho
top
+1
Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects: th-cam.com/video/WVICLYVUDes/w-d-xo.html
after that
} doesnt work like shut be
Same, which I don't get why. It's not like this tutorial is super old.