My project is taking some shape finally. I remember back in the day when float was not really recommended and I can’t decide whether I like it or not; rather just go with no floats.
As you can see in my project, the right side of the site is totally out of order (CSS is float right) but when I put float left it positions itself before the #sidepanel (white area)
Need help with these corrections:
Arrange divs (.header, #sidepanel, #content) after each other nicely
Make the black area (.header) for navigation automaticly as long/high as the white area is (#sidepanel)
Have the navigation (click on hamburger) to push the site out and not lay in front of content IF THAT IS OPTIMAL (feedback on this idea please)
For some reason the hamburger is not sensitive enough to where you need to put your mouse at its bottom to get the cursor - why is that
Your layout is not responsive and I’m not exactly sure how you want it to look at different screen sizes. I would need to know the desired layout. I get the feeling it might require some rework of both the HTML and CSS. It’s one of those things that are almost impossible to give a “cookbook recipe” guide to. I can likely code it but I might not be able to give a terse step by step guide to it. I’d suggest learning about Flexbox and CSS Grid for layout.
Personally, I think side drawer menus are best used as an overlay. I wouldn’t make it push the content.
When using the checkbox “hack” for menus you want to nest the icon (your spans) inside a label with the for attribute set to the id of the checkbox. That way it doesn’t matter where the checkbox is located clicking the label will select the checkbox. The checkbox does not need any styles other then what is needed to hide it.
Well, responsively all elements should fall under each other - so the navigation would pretty much stay the same, then the sidepanel below it, and then the #content. And all elements are divs; all I really need is for them all to stand next to each other.
When it comes to responsive design there tons of devices out there which means you can’t account for all of them. My recommendation is for you to use your dev tools and within the responsive view resize the screen until the layout breaks then write a media query based on that. Repeat the process until you are pleased with how it looks.