My main aim is for it to be responsive (hide the sidenav which it does now) and for the overflow sidebars to be correct. As you can see from the image, there is currently two sidebars on the right hand side due to the footer. I want the footer to be sticky but if i include it in the grid rows it’s always visible (as it should be) but i’d like it to just be sticky and then get pushed down with the content and reduce to one scrollbar.
Right now I have the sidebar scrollbar overflow working (i think… though if i’m doing something wrong please let me know) Just would like the main section scrollbar working.
Also in regards to one sidebar being (the browser one) and the other being my manipulated one… for the main section it’s not possible to just keep the default browser one? Similar to the Bootstrap docs page: Introduction · Bootstrap v4.6 (getbootstrap.com) Thanks
You’re in desperate need of whitespace. Just starting with this would help, but adding a bit of left padding in the aside would be good.
header, p { padding: 1rem; }
The tile should be part of the header, not of the aside. It looks odd when you’ve got the title scrunched up there and the menu (I’m guessing that’s going to be a hamburger icon when mobile width?) next to it when the screen is wider than mobile.
The sticky footer which doesn’t show when the content is large is a bid odd. Having to hit the correct scroll bar to get to it seems odd, and it’s what is causing the double scroll bars.
I think you’ve overly using grid. Allow things to flow as they need to unless you really need to control the objects in them. As it stands now, it’s not needed in main for sure. Removing it from aside causes some issues, but it really shouldn’t be needed there either.
Remove the height:100vh from .layout and use min-height:100vh instead and also remove the overflow from that rule. The default browser vertical scrollbar will then apply. However you will then need to re-design the fixed sidebar to match (see my demo below).
You don’t have a sticky footer you just have a footer below a 100% high element. In fact it’s the opposite of sticky as it’s never visible until you scroll.
Here’s an example of a sticky footer using grid. If you add more content into the main section then the footer will get pushed down as required.
I’ve only quickly adapted this from something else so is just a proof of concept.
It uses min-height to create the initial height and the middle row is set to 1fr to make it expand while the header and footer are just auto and do not take up unwanted space. That’s all that’s needed for a sticky footer (note I am not talking about fixed footer or a position:sticky footer here).
If you wanted a fixed positioned side column (or perhaps a position:sticky side column) rather than just a scrollable column then it would need a bit more work and possibly require a couple of magic numbers to hold it together.
Hi so i’m aware i’m in desperate need of whitespace this was literally a quick demo to try get the layout i want and to see how the scrollbars work. In no way would this be used in real life on a proper site.
I get what you’re saying about the header logo but in the case of an admin dashboard thats on desktop mode i think it’s ok to have a logo there. Of course it won’t be scrunched up if this was an actual site that might go live. If u look on the Bootstrap themes admin templates a good chunk of them do the header how i envisioned the header. Bootstrap Admin & Dashboard Themes and Templates (getbootstrap.com)
Tbf tho the way youtube has designed their sidebar and then their main content is basically what im after and the logo all in the header looks nice! https://www.youtube.com/
Have i explained myself poorly or something?
The whole codepen i sent literally is a dummy testing version just trying to get the layout correct, so the menu yes that might eventually be a hamburger icon but right now in this version it’s just a mockup, it’s not supposed to look pretty.
Am i doing it wrong using CSS grid? it seems like the perfect technology to use for a dashboard layout design. 2 column grid layout with rows then when u move to mobile it just stacks and i can use a media query to hide the sidebar etc.
Please can you produce a Codepen of what you mean. I really appreciate both you and Pauls help. Thanks
I thought my codepen was more or less what you were asking for so I must have missed something. I’ve just changed a couple of lines in my demo to match your drawing 1.
No I think grid is good for this as it lays out the sections nicely. It could be done with flex as well but I like the named areas in grid which as you say helps with visualising things.
The tricky part is the fixed positioned side menu as you need to make the grid avoid the menu (hence the fixed width on the sidebar). I did this my making an empty grid column at the side so that the rest of the content avoids that space and then fixed positioned the side menu.
Fixed positioned elements are removed from the flow and always based on the viewport so you have to make room for them in some way or content overlaps. I could have just done a basic one column 3 row grid and shifted it to the right by the same amount as the viewport. However in my demo it allows the fixed column to be centred with the rest of the page if there was a max-width on the main container although I realise your page won’t need this.
The only thing to remember is that is I sized the logo to match the header height (which is what youtube does) to give the impression of one bar across the top. It’s ok as long as you don’t have wrapping text in the header and they just won’t match height but no real harm done.
