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.
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 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.
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!
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 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 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.
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?
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.
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.
I can easily understand coding now with this YT Channel. Thank you soo much Coding2GO
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!
Thank you very much, I made this navbar as a React component and it worked perfectly.
bro u r lifesaver i will gonna ask it in interviews 😂
Very Cleary taught , amazing video .
Thank you!
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 so much this will help me get maby a passing grade instead of guaranteed failure
very helpful and well explained.thank you
Beautiful! This was exactly what I was looking for! Ty for the great tutorial.
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.
Thank you so much Fabian!
Just Amazing bro. Without Javascript 🥰🥰🥰
Glad you like it
Your channel is one of the best for learning CSS tricks 😎💥
That's nice 😁Thank you!
Thanks you bro you are great. ❤
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!
thanks! its help a lot
LOVE YOUUUU BROO! Amazing video, excellent explained.
Glad you liked 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 ?
Very helpful, when everything I know is back-end specific
thanks, this is really useful, ive been looking for nav bar like this! 💖💖💖
You are amazing
Komme ab 4:36 nicht mehr weiter kann mir da jmd. helfen wie man diese Klammer da macht
this helped me so much. tsm ❤
I give up it doesn't work from here to me 9:37
its great bro realy helpfull thank you so much
That was simply terrific!! Thank you so much for your generosity in sharing your skills and knowledge. Chalk up another subscriber!
Thank you very much, your videos are very useful thanks again.
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 ✌️
You are underrated :(
Great video!!!
One ask, why do you always download SVG icons files from google, instead of using link + span code icon?
Is it better?
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.
The menu from the svg file doesn't appear.
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!
🎉 great
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?
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.
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?
Please, how do you make the home link on the navbar, join the other links to the right? Please help me
This is amazing buh could you add code of logo display by right side . Like how how was displayed in large screen
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?
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
nav {position: fixed;} shrinks the bar width.
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!
are we still able to see the logo even when the screen is smaller
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
Bro I can't control the open and closing transaction speed why?
Use transition property
Nvm, it works now. Just that my padding all crpped up. I can probably fix that after screwing around for a bit though.
can you share code?
11:29
Animated Navigation Bar in HTML and CSS | Menu Hover Animation Effects: th-cam.com/video/WVICLYVUDes/w-d-xo.html
I couldn't make it work because it wasn't made in a mobile first approach... 😢
top
+1
after that
} doesnt work like shut be
Same, which I don't get why. It's not like this tutorial is super old.