How to Freeze Header

  • Resolved rt.tery

    (@rttery)


    10 years, 8 months ago

    I’m trying to see if there is a way to freeze the header so that it remains static as I scroll through the content below. What sort of changes do I need to make in order to do this?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Sure, I can get you started with it. The following CSS added to a child theme will give you a fixed position menu:

    @media all and (min-width: 800px){

  .site-header {
    position: fixed;
    width: 100%;
    z-index: 9;
  }
  .overflow-container {
    padding-top: 72px;
  }
}

    Make sure to keep your updates within the media query as not to disrupt the mobile menu. Also, you may need to make padding adjustments to ‘overflow-container’ at different screen widths depending on how many menu items you have, but that should pretty much do it ??

    Thread Starter rt.tery

    (@rttery)

    Worked like a charm. Thanks!

    Is this for just that theme or does it work for any?

    What about freezing the top menu too?

    Theme Author Ben Sibley

    (@bensibley)

    The same concepts will apply to other themes, but this CSS was written specifically for the Ignite theme.

    And the menu?

    Theme Author Ben Sibley

    (@bensibley)

    That CSS fixes the header to the top of the screen which contains the menu.

    Thank you for the prompt response!

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to Freeze Header’ is closed to new replies.