I feel like this is just me having a brain fart, but I’m having extreme difficulty with this.
http://ca scad es.red esign.fin alsite.co m/ab out
I’d like the main navigation to extend to the right browser edge, and not clash against the logo. HTML is flexible.
Pseudo code is fine. Sorry for the CSS mess; I’ve been messing with this for a while now and it needs a clean up.
I think I got it…can someone see if there is a better solution?
Yeah, he is “improving it”
Surely that’s an improvement.
Sass is a great improvement. One error and the entire thing refuses to compile!!!
PS- that is fixed.
White bar / rainbow one. The unstyled one hasn’t had the fix applied yet.
I added a grid overlay (at the top click the debug button) and see how the main navigation doesn’t line up in the grid.
At 1200px and down I’ll have a different solution which will be easy (floats). My issue is once auto margins start kicking in. Er, my issue WAS…
Same but different 
#fsHeader .nav-main{
margin-left: calc(280px + (50% - 590px) );
width:auto;
}
That…is different 
Just curious, but why are you using absolute positioning on the logo container (which is display:block) and crow-barring the nav container in (which is also display block) on top of it
Would seem simpler to either flex them or apply display:table-cell to them?
Inquiring minds want to know…
The logo needs to be within the grid, while the navigation doesn’t. Unless I misunderstand you (and feel free to get a demo up showcasing me being wrong), then I wouldn’t be able to have the main navigation extend to the edge of the browser window like that. The logo needs to be 1180px auto margined, which I wouldn’t be able to do if i flex or table-cell’d it.
I did position absolute in the early stages of making this; and I haven’t had a chance to clean it up.
Feel free to play with it in dev tools and make the changes. I’d really love to see if there is an alternative to this that would work.
The issue I had was having part of it in the grid but then extending hte right part of it to the browser edge. There’s negative margins but that doesn’t bring content over there; it’s good for background colors, etc, but I was having issues.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.