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.

ℹ️

Known bug: When you install this snippet it will appear inside your page content in the Super Dashboard preview, however it will appear as normal at the top on your live site.

Installation instructions

Step 1: Install the snippet in Super

Open your site in the Super Dashboard
Open the ‘Code’ page
In the ‘Body’ tab, paste the following snippet:

<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

Edit the text on the bottom line of the code snippet, replacing ‘Hello world’ with your text of choice.
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