Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive fixed header problem

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43986
    XaviJr
    Participant

    Here’s my problem:
    http://jsfiddle.net/me7vd/

    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”?

    #131155
    amooreTO
    Participant

    I am not sure if I 100% understand your question, but try adding a container/wrapper to your fixed header.

    I updated your fiddle: http://jsfiddle.net/F7bAJ/1/

    Again, I not sure if that is what you are asking for.

    #131176
    XaviJr
    Participant

    I think you misunderstood me.
    Let me try again..

    Usually, with more width, #header has 90px of height. I want #content to show bellow #header so I’m adding padding-top:90px to #content.

    In my example I didn’t float my list items just to show the problem in the mobile version. In mobile, with less width, #header is more than 90px height so #content is overlapped by #header.

    What I’m asking is if there is any way to push #content again to the bottom of #header, just using CSS and no JS, so I don’t have any overlapping.

    #131179
    Senff
    Participant

    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.

    #131182
    XaviJr
    Participant

    That’s what I thought. Thank you Senff.

    #132087
    Archie22is
    Participant

    Hey guys,

    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?

    Here is my pen: http://codepen.io/Archie22is/pen/vBqin

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.