Making header Fixed

  • Resolved paul.a.cunn

    (@paulacunngmailcom)


    11 years, 12 months ago

    Hi everyone,

    So on my site I would like the header to be static and stay at the top of the browser window. I have done this with the footer but the header is more difficult. I have used the “position: fixed;” and then shifted the #wrapper down to account for the header but different broswers are adding or taking away space so the slider is sometimes too far down or being overlapped by the header. Here is a link to my site. I currently have the header scrolling. I want it to act like the footer.

    https://www.natalieturgeonband.com/

    Thanks for the help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What if you reapply your position fixed and apply some z-index to get it on-top, and then add some top values to your content?
    E.g;

    #slider {
 top: 200px;
}

    Thread Starter paul.a.cunn

    (@paulacunngmailcom)

    I have added the following css to my custom css looks good.

    #header {
    position: fixed;
    width: 1140px;
    z-index: 9;
    }

    #slider {
    position: relative;
    top: 187px;
    }

    #container {
    position: relative;
    top: 187px;
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    ?? And I must say, Thank you for your contributions to the WordPress community.

    Thread Starter paul.a.cunn

    (@paulacunngmailcom)

    Thanks just paying it forward for all the help I have received.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Making header Fixed’ is closed to new replies.