Forums

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

Home Forums CSS CSS Sticky Header

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #260351
    tallerwp
    Participant

    Good afternoon,

    I wanted to make the top header of a template that I’m making stay fixed. I have no problem doing that since I used it.

    .header {
    position: fixed;
    width: 100%;
    top: 0px;
    }

    The problem is that the content below is now under the header. Then I use

    .container {
    margin-top: 20px;
    }

    The problem is that in responsive you can see blank margins between the header and the container. The container is an image with a title. A hero.

    What can I do to make that container “stick” to the header on all devices? Let’s say you can take that margin automatically without any spaces.

    #260354
    Paulie_D
    Moderator

    If you are going the fixed position route then you need to know the height of the header.

    Then you can add margin or padding to your first non-positioned element to shift it down to compensate.

    If you don’t know the height of the header, you need Javascript to calculate it and add the necessary value accordingly.

    Here’s exactly the same issue on Stack Overflow

    https://stackoverflow.com/questions/44176861/headers-height-to-margin-top

    #260361
    tallerwp
    Participant

    Great, I understand, yes!!

    I will try it, now.

    Thank you, you are very nice

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