Sticky or fixed header

  • rdeipar

    (@rdeipar)


    6 years ago

    Does anyone know how to keep their header up top while scrolling? Exactly like this website for example:

    I tried a bunch of CSS already and inspected their elements and code just to see how they did it but nothing works on my end. Any help?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • ikaring

    (@ikaring)

    6 years ago

    Hi.
    Pls check position:fixed
    You might need some more code, but they are not WP matters.

    Thread Starter rdeipar

    (@rdeipar)

    6 years ago

    I tried that a minute ago and it works, it’s just now being covered by my page’s content and I’m trying to figure out how to make it not block my fixed header

    ikaring

    (@ikaring)

    6 years ago

    You might need at least:

    body {
  padding-top: (your header hight);
}
header {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
}
    Thread Starter rdeipar

    (@rdeipar)

    6 years ago

    Yikes the z-index just puts the header on top over my content now 🙁

    Thread Starter rdeipar

    (@rdeipar)

    6 years ago

    I decided I could just change the content’s top padding in General Settings so I don’t go crazy over so much CSS trial and error. Thanks for your help though!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Sticky or fixed header’ is closed to new replies.