Skip to main content
OutSystems

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

Question

In the London theme, the header is fixed at the top of the page. How can I make the header scroll with the page?

Answer

The CSS style sheet defines the header as follows. On lines 4 and 5, the CSS properties position and top fix the header area in the top of the screen.

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

To change the behavior, add the following CSS code to your style sheet. The code:

  • Resets the property position ;
  • Turns off the padding of the content area, which no longer needs to compensate for the fixed header.
.Header {
    position: inherit;
}
.Content {
    padding-top: 0;
}
  • Was this article helpful?