Skip to main content





How to make the header scroll with the page in the London theme

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • In the London theme, the header is fixed at the top of the page. How can I make the header scroll with the page?


    The London CSS style sheet defines the header style as follows:

    .Header {
        background-color: #393939;   
        color: #D1D1D1;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
        box-shadow: 0px 1px 3px #111;

    In lines 4 and 5, the CSS properties position and top fix the header area in the top of the screen.

    To change the behavior of the header in Web Applications using the London Theme add the following CSS snippet to your Application's style sheet:

    .Header {
        position: static;
    .Content {
        padding-top: 0;

    This CSS snippet resets the property position and removes the top padding for the content area (which was used to compensate for the fixed header).

    • Was this article helpful?