Skip to main content
webmaster698
webmaster698
Known Participant
December 11, 2018
Answered

Sticky Header

  • December 11, 2018
  • 2 replies
  • 1285 views

Hi all,

I am trying to look for a simple line of code I can add to my home page to make the header follow as a user scrolls on the page. I don't want to really get mixed up with Bootstrap to do it. I know there has to be something simple to just put in the page.

Does anyone know of something out there?

Thanks

    This topic has been closed for replies.
    Correct answer ALsp

    .header {

    position: sticky;

    top: 0;

    }

    Substitute "header" with the actual class name assigned to your header.

    "Sticky" works in all modern browsers and devices. The only issue is that you must not set the header or any of its parent elements to overflow hidden.

    2 replies

    ALsp
    ALspCorrect answer
    Legend
    December 11, 2018

    .header {

    position: sticky;

    top: 0;

    }

    Substitute "header" with the actual class name assigned to your header.

    "Sticky" works in all modern browsers and devices. The only issue is that you must not set the header or any of its parent elements to overflow hidden.

      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert
      Community Expert
      December 11, 2018

      Which browsers do you need to support?

      The absolute easiest way would be to add "position:sticky" to the CSS of the container you want to stay put.

      It works in all major browsers except Internet Explorer (works in Microsoft Edge).

      if it's the Header of the page, and you want it to stay put, you can also use "position:fixed" instead. That locks the container where ever it appears, while position:sticky will move with the page scroll until it hits the top of the viewport.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices