I have a responsive menu that has only 90px of height but is going to appear similar to that example in the mobile version (less width).
This header is position:fixed and I gave the 90px of padding-top to the content div so it doesn’t overlap. The problem is when the height is bigger, like that example. Is there a way to give that offset “in a responsive way”?
I don’t think it is possible to have the header “push down” the main content, when the header has a fixed position. Reason being that the fact that it’s fixed, it’s taken out of the document flow and it has no impact on its surrounding elements (= everything else on the page).
You probably can’t do this without some JS/jQuery where you calculate the height of the fixed header, and then use that to push down the main content. A bit like this: http://codepen.io/senff/pen/gaEzd.
I am in the same predicament as well. I managed to conquer the problem by using jQuery (offset) but my problem is even bigger. The site is responsive and the offset is static. Is there a way to adjust the offset depending on the media queries?
I know that is kinda lame… but how else would one navigate the problem? Update the offset based on media queries?