You can call attention to a sale or special announcement by adding a sitewide banner to your website. This guide will walk you through building a banner and placing it above your top navigation bar using custom code.

Note: This banner won't appear on mobile devices if you have the floating footer activated.

Step 1: Add a Text Block to Your Footer

1. From the Websites app, select the Pages tab.

2. In the right-hand sidebar, under Global Content, click on Footer.
   

3. Click one of the (+) buttons between the content blocks and select Text from the menu.
   

4. Enter your desired announcement into the Description field. You can include plain text, hyperlinks, or buttons.
   

Step 2: Publish and Find the Block Wrap ID

You'll need to find the unique ID for the text block you just created.

1. Publish your site, then open it in a new browser tab.

2. Right-click (or CTRL + click on Mac) on the banner text you added to the footer and select Inspect.

3. In the Inspect tool, find the Block Wrap ID for your text block. It will look like a long string of letters and numbers after blockWrap_.

4. Copy just the ID (the part after blockWrap_) and save it somewhere, as you'll need it in the next steps.
   

Step 3: Add Custom CSS

1. Select the Developer tab at the top of the page, then select CSS on the left-hand sidebar.

2. Paste the following code into the CSS field:
   

   /* Sitewide Banner */
   
   .blockWrap_c7b6f99b274b47f5b010b83a549f1e41{
   background-color: #000000;
   color: #ffffff; 
   text-align: center;
   padding: 10px;
   }
   
   .headerAndNavContainer{
   padding-top: 0px !important;
   }

3. Replace the placeholder .blockWrap_c7b6f99b274b47f5b010b83a549f1e41 with the Block Wrap ID you copied in the previous step.
   

4. (Optional) You can change the background and text colors by replacing the hex codes.
   

5. Click Save.

Step 4: Add Custom JS

1. Select Body JS on the left-hand sidebar.

2. Paste the following code into the Body JS field:

   // Sitewide Banner
   
   $('.blockWrap_a6b2668dd95044cfbe3e7cc3153e3c4b').prependTo('.headerAndNavContainer');

3. Replace the placeholder .blockWrap_a6b2668dd95044cfbe3e7cc3153e3c4b with the Block Wrap ID you copied.
   

4. Click Save.

Step 5: Preview and Publish

After adding the code, preview your website to see how the banner looks. If it appears correctly, you can click the Publish button to make it live on your site. If the banner is not showing up, double-check that you completed each step correctly.