Since many have pointed out that the fixed offset value of 50.4px is not optimal... You are right! Here is an alternative approach: Instead of using the dev tools to find out the height of the navbar we could 1. Declare a height to our navbar and use that value for the offset 2. Make sure to use css units like rem for the navbar's height to account for changes with the font-size 3. Use box-sizing: border-box; or remove the padding in the navbar so that it doesn't interfere with the height/offset New Version: nav{ height: 3rem; top: 0; position: sticky; grid-area: navbar; background-color: blue; color: white; } aside{ height: calc(100vh - 3rem); top: 3rem; position: sticky; align-self: start; grid-area: sidebar; background-color: grey; }
Take note for those who have padding declared should add the padding top and bottom to the height of the nav. Eg nav{ height: 2em; Padding: 1em; Top:0; Position:sticky; } Aside{ Height: calc(100vh-4em); Top: 4em; Position: sticky; }
I have worked with this layout and using rem for the height and top offset of the sidebar will NOT guarantee that these values stay correct if the browsers font size is increased. Instead set the two values in JavaScript dynamically by getting the offsetHeight of the navbar and adding px. Also consider listening to window resizes.
Thank you for sharing this video! Appreciate the emphasis on HTML and CSS semantic simplicity. This really doesn't need to be complex. With regard to scrolling the MAIN element while reliably maintaining HEADER and FOOTER elements variable heights without JS or extra comparatively complex CSS, I have found that setting HTML, BODY, APP-CONTAINER (or whatever wrapper your framework gives you), MAIN, and ARTICLE to overflow: hidden, then setting SECTION to overflow-y: auto, assuming that is your direct DOM path from the root element to the scrollable element, allows native browser scrolling bahvior for one to many scrollable elements (SECTION in this case), without JS or extra CSS to track and offset element heights. The HEADER and FOOTER element content (plus the content padding/margins) "intrinsically" determine the height of the HEADER and FOOTER. When HEADER and FOOTER element content naturally wrap to the next line, changing their height, the scrollable SECTION elements respond intrinsically. This "intrinsic layout" approach has helped avoid the complexities of other techniques, while achieving similar or better results, especially with edge cases. Be encouraged and keep up the great work!
I just love this channel because, How this channel will explain the computer language to you is just mind blowing. Even a noob like me feels like a pro when I watch any video of this bro.✌️❤️❤️
Awesome showcase, but I would personally fix the height of navbar and use it as a reference everywhere instead picking the computed height from dev tools.
And here we got one more awesome and wonderful video from Grid, yeeehhhh let's go..... thanks a lot sir. Love from all coders ❤❤❤.. You are true youtuber and great professor sir, 👏 thank you so much sir.
I'm using a screen reader, and trying to follow the video and work at the same time is proving tricky. Is the source code available. Happy to buy you a coffee...
@@abdullahfareed3209 No, if it is not necessary, that will depend on your project or how you want to face the challenge, but review the Quickly CSS Grid documentation, you can also download the template examples that exist and analyze the code for a better understanding.
I had a weird bug when following this. If the main content area has too little content, when resizing, it doesn't get pushed over all the way. I fixed it by updating the grid layout in the media query. body { grid-template-areas: "navbar" "main" "footer"; }
Is there a way to make the side and nav bars modular? Meaning i only need to make a single nav.html file and single side.html file that can get ported into many content pages. That way if my site grows i can alter just a single nav file and the changes take affect across my entire content. By the way i need a client side solution.
Really should used min-height on body, use height: 100vh, then set overflow-y: scroll on main... now you don't have any of the height styling on the aside or any hardcoding... Using hardcoded position values with grid/flex feels reallly bad.
You can't assume that your nav will always be 50.4px when sizing the aside vertical offset - what is the user agent changes the font size?? Something more dynamic should be used.
I hear you! To account for this I recommend to use the unit "rem" instead of pixels. This unit scales relative to the font-size. We would need to apply a height of 3rem for the navbar and then use these 3rem for the vertical offset.
@@coding2goI tried this but sidebar is going slightly above navbar when scrolling. What to do? Same code. Even in media query it is happening. Thanks in advanceI tried this but sidebar is going slightly above navbar when scrolling. What to do? Same code. Even in media query it is happening. Thanks in advance
@@armanhossain2491 It is possible that you still have the padding applied. That will add a few pixels to the navbar and therefore increase its size. You can use box-sizing: border-box; or simply remove the padding when having a height of 3rem on the nav.
@@coding2gothat works great for personal websites, but the moment you're building for corporate, it's only a matter of time before marketing demands for GTM or a CMS to be added and then complains that the layout keeps breaking. Not to detract from your video as it's very well presented and is the best attempt at dealing with a bad design pattern (sidebars are just a bad layout decision IMHO)
@@armanhossain2491i posted a reply on a comment above. The reason for that was the padding . Whatever your padding is you need to add it to the height of the nav eg padding of 2px with a height of 40px will equal 44px It's the 44px that will be subtracted from the aside height and will also be the top declaration for the aside. Hope this helps.
i tried to follow all your instructions but when i press the button the side bar wont appear, so i ask copilot for help and copilot suggested adding this code : document.addEventListener("DOMContentLoaded", function () { const sidebar = document.getElementById("sidebar"); function toggleSidebar() { sidebar.classList.toggle("show"); } document.querySelector("button").addEventListener("click", toggleSidebar); }); and it works! Copilot commet is : Ensure your JavaScript is placed correctly, either at the end of the body or within a DOMContentLoaded event listener to ensure the DOM is fully loaded before the script runs. I added the code at the end, before closing body tag .Cheers
I can't seem to get the button to work? Thanks in advance! const sidebar = document.getElementById('sidebar'); function toggleSidebar(){ sidebar.classList.toggle('show'); }
Since many have pointed out that the fixed offset value of 50.4px is not optimal... You are right! Here is an alternative approach: Instead of using the dev tools to find out the height of the navbar we could
1. Declare a height to our navbar and use that value for the offset
2. Make sure to use css units like rem for the navbar's height to account for changes with the font-size
3. Use box-sizing: border-box; or remove the padding in the navbar so that it doesn't interfere with the height/offset
New Version:
nav{
height: 3rem;
top: 0;
position: sticky;
grid-area: navbar;
background-color: blue;
color: white;
}
aside{
height: calc(100vh - 3rem);
top: 3rem;
position: sticky;
align-self: start;
grid-area: sidebar;
background-color: grey;
}
Take note for those who have padding declared should add the padding top and bottom to the height of the nav.
Eg
nav{
height: 2em;
Padding: 1em;
Top:0;
Position:sticky;
}
Aside{
Height: calc(100vh-4em);
Top: 4em;
Position: sticky;
}
Or just use border box@@hamza.yusuff20yusuff60
I have worked with this layout and using rem for the height and top offset of the sidebar will NOT guarantee that these values stay correct if the browsers font size is increased. Instead set the two values in JavaScript dynamically by getting the offsetHeight of the navbar and adding px. Also consider listening to window resizes.
No, just don't use min-height on body... set it to 100vh.
My confidence level on css grid just get boosted. Coding2go to the rescue🎉
Great and informative tutorial. You taught in 11 minutes what our professor couldn't the entire semester.
Ossam Bro... Your Work is too good.... My CSS concepts are fine tuned ....
Love from India 🇮🇳
Thank you for sharing this video!
Appreciate the emphasis on HTML and CSS semantic simplicity. This really doesn't need to be complex.
With regard to scrolling the MAIN element while reliably maintaining HEADER and FOOTER elements variable heights without JS or extra comparatively complex CSS, I have found that setting HTML, BODY, APP-CONTAINER (or whatever wrapper your framework gives you), MAIN, and ARTICLE to overflow: hidden, then setting SECTION to overflow-y: auto, assuming that is your direct DOM path from the root element to the scrollable element, allows native browser scrolling bahvior for one to many scrollable elements (SECTION in this case), without JS or extra CSS to track and offset element heights.
The HEADER and FOOTER element content (plus the content padding/margins) "intrinsically" determine the height of the HEADER and FOOTER. When HEADER and FOOTER element content naturally wrap to the next line, changing their height, the scrollable SECTION elements respond intrinsically.
This "intrinsic layout" approach has helped avoid the complexities of other techniques, while achieving similar or better results, especially with edge cases.
Be encouraged and keep up the great work!
I've just started learning HTML & CSS today. Very informative
I just love this channel because, How this channel will explain the computer language to you is just mind blowing. Even a noob like me feels like a pro when I watch any video of this bro.✌️❤️❤️
Great tutorial! Would also style the button to display none outside of the media query 😎
You are so good at teaching any complex topics easily. ❤
whos better? flexbox or grid?
this is what I'm waiting for! Thank you sir! make more tutorial like this
Awesome showcase, but I would personally fix the height of navbar and use it as a reference everywhere instead picking the computed height from dev tools.
Perfectly Explained.👌
keep working ❤️🔥❤️🔥✨
And here we got one more awesome and wonderful video from Grid, yeeehhhh let's go..... thanks a lot sir.
Love from all coders ❤❤❤.. You are true youtuber and great professor sir, 👏 thank you so much sir.
I'm using a screen reader, and trying to follow the video and work at the same time is proving tricky. Is the source code available. Happy to buy you a coffee...
Great video
Awesome tutorial!
I use Quickly CSS Grid to build HTML CSS, and it works perfect :)
hey, brother do you always use display grid in body like him?
@@abdullahfareed3209 No, if it is not necessary, that will depend on your project or how you want to face the challenge, but review the Quickly CSS Grid documentation, you can also download the template examples that exist and analyze the code for a better understanding.
Thank you so much 😍
You are a legend Bro❤❤❤
Do you know how to make a multipule slide menu, which like H&M website size guide
is 1fr the same as auto?
thankyou sir usefully video 🥰🙏
I had a weird bug when following this. If the main content area has too little content, when resizing, it doesn't get pushed over all the way.
I fixed it by updating the grid layout in the media query.
body {
grid-template-areas:
"navbar"
"main"
"footer";
}
Any chance of a grid gallery tutorial?
Thank you so much ❤🙌
Bro.. You are good too much
awesome concept
Excellent
Is there a way to make the side and nav bars modular? Meaning i only need to make a single nav.html file and single side.html file that can get ported into many content pages. That way if my site grows i can alter just a single nav file and the changes take affect across my entire content. By the way i need a client side solution.
Thank you but I have a question
after finishing this responsive the media in max-width 800px don't work with me
if you are not busy reply to me ☺
Nice tutorial
Hi Sir please start Tailwind CSS ,
Love from India 🇮🇳
how you split sceen into two part ?
Thanks for sharing
@coding2GO why did you not use fixed instead of sticky?
ahhh i understand...sorry
which browser do you use
That's firefox
Great
Button doesn't work, what's the conncetion from .show to change the aside, display property to block?
How about a photo?
Should probably calc the height of the navbar and then subtract it from 100vh, using fixed px isn't a good option
Great showcase tho
Bro a video on useful tips or cool features of Bootstrap
At the end of the day, it's all vanilla HTML, CSS, and JS in the browser. Less dependencies, the better.
here when 1 view and 1 like
Really should used min-height on body, use height: 100vh, then set overflow-y: scroll on main... now you don't have any of the height styling on the aside or any hardcoding...
Using hardcoded position values with grid/flex feels reallly bad.
❤❤
1:41
❤❤❤🎉🎉🎉🎉🎉
I'm I the only one noticing that in the video thumbnail is the hamburger menu but something else implemented 😢
You can't assume that your nav will always be 50.4px when sizing the aside vertical offset - what is the user agent changes the font size?? Something more dynamic should be used.
I hear you! To account for this I recommend to use the unit "rem" instead of pixels. This unit scales relative to the font-size. We would need to apply a height of 3rem for the navbar and then use these 3rem for the vertical offset.
plz give a video about css unit. I request you before to leave a video about css unit. Hope that you'll give a tutorial on css unit @@coding2go
@@coding2goI tried this but sidebar is going slightly above navbar when scrolling. What to do? Same code. Even in media query it is happening. Thanks in advanceI tried this but sidebar is going slightly above navbar when scrolling. What to do? Same code. Even in media query it is happening. Thanks in advance
@@armanhossain2491 It is possible that you still have the padding applied. That will add a few pixels to the navbar and therefore increase its size. You can use box-sizing: border-box; or simply remove the padding when having a height of 3rem on the nav.
@@coding2gothat works great for personal websites, but the moment you're building for corporate, it's only a matter of time before marketing demands for GTM or a CMS to be added and then complains that the layout keeps breaking. Not to detract from your video as it's very well presented and is the best attempt at dealing with a bad design pattern (sidebars are just a bad layout decision IMHO)
Seeing someone hard coding 50.4 px (inspector value) really hurts. If you learn one thing from this video: Don’t do this.
I tried this but sidebar is going slightly above navbar when scrolling. What to do? Same code. Even in media query it is happening. Thanks in advance
What's a better approach?
@@AdewaleLuqmaanMudasiruuse framework.
You cant say "Don't do this" without telling your approach ;-) thats how internet works
@@armanhossain2491i posted a reply on a comment above.
The reason for that was the padding . Whatever your padding is you need to add it to the height of the nav eg padding of 2px with a height of 40px will equal 44px
It's the 44px that will be subtracted from the aside height and will also be the top declaration for the aside.
Hope this helps.
i tried to follow all your instructions but when i press the button the side bar wont appear, so i ask copilot for help and copilot suggested adding this code :
document.addEventListener("DOMContentLoaded", function () {
const sidebar = document.getElementById("sidebar");
function toggleSidebar() {
sidebar.classList.toggle("show");
}
document.querySelector("button").addEventListener("click", toggleSidebar);
});
and it works!
Copilot commet is : Ensure your JavaScript is placed correctly, either at the end of the body or within a DOMContentLoaded event listener to ensure the DOM is fully loaded before the script runs.
I added the code at the end, before closing body tag .Cheers
I can't seem to get the button to work?
Thanks in advance!
const sidebar = document.getElementById('sidebar');
function toggleSidebar(){
sidebar.classList.toggle('show');
}
Button
Navbar
Sidebar
Hello world
Footer
Kindly post react topics too. You are explaining everything too well 🫡