Side nav and main content

HI! So I’m stumped and maybe somebody can help. I have a rotated div holding my nav that is 120px. I need the remainder of my content to fill the rest of the screen and not run under the fixed position nav div block.

I’ve tried to make the div have a percentage measure rather than pixel and place all my main content into a div with the remaining measurements of the view port. (12% to 88%) But I think because the nav div is rotated the 88% isn’t actually fitting right up to the div.

SOS


Can you please share the share link with us, then its easier to help you

HI! Well the great gods of Google have never failed me and after a BUNCH of trial and error and some custom code I nailed it. But for anyone else who would like to try I’ll share the goods on this post so it’s quick.

So here it is:
I was attempting to have this kind of layout of the page. I don’t have any images of the before, however the main content area was hiding under the fixed nav to the right. (Which is a problem because of my beautiful content hiding :frowning: )

Solution:
I don’t believe Webflow has the CSS calc juice yet so custom code was what it was going to have to come to. Taking the measurement of the side nav (120px) and removing it from the viewport width would make the main content fill the space perfectly.
But this side nav is only for my Desktop and Tablet view. So, some forum search gave me the dimensions Webflow uses for media queries. After that it was simply this:

Lastly, I added the main class that I used in my custom code to the elements that I needed to move. Best way was adding it to the sections of each page. Voila!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.