Top banner

This snippet allows you to add an announcement banner at the top of your website, as shown above at the top of this page.

Installation instructions

Step 1: Install the snippet in Super

1. Open your site in the Super Dashboard
2. Open the ‘Code’ page
3. In the ‘Body’ tab, paste the following snippet:
Copy

<style>
  .top-banner {
    padding: 12px;
    text-align: center;
    color: var(--navbar-button-text-color);
    background: var(--navbar-button-background-color);
  }
</style>
<div class="top-banner">Hello world</div>

Step 2: Customize the snippet

1. Edit the text on the bottom line of the code snippet, replacing ‘Hello world’ with your text of choice.
2. The banner colors are currently set using your navbar button colors, you can change the colors in ’Design’ > ‘Colors’ > ‘Navigation’, or you can modify the code directly and replace the CSS variables with RGB or HEX color codes