Forgive me if I'm not the first to ask, but I haven't been able to find a solution to my particular challenge.
I'm working on a project and I want to have a similar navigation as the vertical nav bar in this layout:
Notice how the buttons extend all the way to the left side of the page. Like this example, I want all my content to be centered in the middle of the page, so that the actual links (the text) in the nav bar will remain stationary under the logo if the browser is re-sized. However, I want the margins (which includes part of the nav bar buttons) to be able to expand and contract past the container if the browser is re-sized.
I've played around with ideas for a few hours, but I am not an advanced CSS coder and haven't made much progress.
My idea was to put all the content in a container and then position absolute the nav bar to extend outside it, but this seems to leave me with only two options: Either the whole nav bar (including the margin portion) remains fixed in position while the margins are fluid, or the text in the nav bar remains stationary with the rest of the content (like it should) but the buttons won't extend to the left of the container. Is it possible to achieve what I'm wanting to do? Or is there a more logical way to approach this than using a container? Or is a static site the only way to go here?
I think a diagram would suit better than code here:
Nothing substitutes for code
Pictures help to visualize the goal, but nothing can replace seeing what you've tried or are trying. Can you provide a link to a test case?