How to Keep a Static Header That Moves Even When Scrolling in HTML


When you add a header to your HyperText Markup Language (HTML) Web page, this element disappears as you scroll down in a browser window by default. This is often problematic if you have links or other essential information that need to be fixed in place so they are always visible. Using Cascading Style Sheets (CSS) in conjunction with your HTML, you can keep your header static so it no longer moves.

  • Start your text editor application and bring up the Web document that has the header you want to modify.

  • Position your cursor before the ending </head> tag and type the following CSS code:

    <style type="text/css">

    header { }
    container { }


    The header rule manages the content of your header, while the container style controls the main body of your Web page.

  • Enter "position: fixed;" inside the header rule's curly brackets and type "background-color: ;" and "height: ;" after it. Enter a hexadecimal color value after the background-color attribute, and type a number value in pixels after the height to define this measurement. To illustrate:

    header { position: fixed; background-color: #ffff00; height: 100px; }

    The fixed position specifies you want the header to stay in place on the page, while the background color displays a different shade so your header is visible as it moves past the main content.

  • Type "margin-top: ;" inside the container style and enter a number value in pixels that matches the height of your header. Your complete CSS now looks like the following example:

    <style type="text/css">

    header { position: fixed; background-color: #ffff00; height: 100px; }
    container { margin-top: 100px; }


    Adding a margin to the container rule moves your main content below the header.

  • Enter "<div id="header">" before your HTML header code and type "</div>" at the end. Additionally, type "<div id="container"></div>" after the header and enter your website content between these div tags. To illustrate:

    <div id="header">
    <h1>This is your header.</h1>
    <div id="container">
    <p>This is your page content.</p>

  • Save your file. Your header is now static.


Promoted By Zergnet



Related Searches

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!