Add text below header

AI-generated summary

In a support thread titled ‘Add text below header,’ PatrickH asks if it’s possible to add text below the header while keeping it visually within the header area, suggesting increasing the header size. dax confirms this is achievable using CSS and HTML by creating a custom component in /admin/customize/themes. They provide specific CSS rules to style and position the text (class .test) above the header, adjust header height, and add padding to #main-outlet to prevent content overlap. The HTML snippet inserts a <div> with placeholder text after the header. dax notes that media queries are needed for responsiveness. PatrickH confirms the solution works but reports that the latest post appears underneath the added text, asking if this can be fixed — implying the padding or z-index may need further adjustment to ensure content visibility.

Is it possible to add tekst below the header (but still in the header?) see screenshot
but then ofcourse make the header lager.

With some lines of CSS and Html yes, it is possible:

Create a new component on /admin/customize/themes and when it is ready remember to add it to the main theme of your site.

On desktop > CSS add:

.test {
    text-align: center;
    margin-top: -50px;
    z-index: 1000;
    position: fixed;
    width: 1100px;
    color: #D60107;
}
.d-header {
    height: 6em;
}
#main-outlet {
    padding-top: 8em;
}

On desktop > After Header add:

<div class="test" 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at rhoncus arcu, ut placerat purus. Integer et varius enim, in tincidunt ex.</p>
</div>

You still need some media queries for other devices.

thi works, great.
the only thing is that the latest post is below this header, can this be fixed ?