Add Sitewide Banner Above Header

You can call attention to a sale or a special announcement to your website's visitors by adding a sitewide banner above your website's top navigation bar.

This process involves building a text block, then adding some custom CSS and JS code to your site to place the banner above the navigation bar.  Note: This will not appear on mobile devices if you have the floating footer activated.

• Step 1: Add a text block to your footer
• Step 2: Publish the site and copy the block wrap ID
• Step 3: Add custom CSS
• Step 4: Add custom JS
• Step 5: Preview and publish

Step 1: Add a text block to your footer

1. 1. Select the Pages tab at the top of your Websites app.
   2. On the right-hand sidebar, under Global Content, click on Footer.
      
      

   

2. Create a new Text Block by clicking one of the (+) buttons between content blocks and selecting Text from the menu options.
   
   
   
3. Enter the desired content into the Description field. You can add plain text, hyperlinks, or buttons.
   
   
   
   

Step 2: Publish the site and copy the block wrap ID

1. Publish the site, then open up the website in a new browser tab.
2. You will see the content you added in the website's footer. When the website is pulled up, right-click (or CTRL+click) on the banner text, then select Inspect from the menu that appears.
3. With the Inspect tool open, hover your cursor over the content you added, and then find the Block Wrap ID in the Inspect tool (see screenshot below). Copy the Block Wrap ID (you will only need to copy the code segment inside the circle in the screenshot below) and paste it into a clipboard or empty document - you will need it for later.
   

Step 3: Add custom CSS

1. Select the Developer tab at the top of the page (Don't see that option? Learn more here.), then select CSS on the left-hand sidebar.
2. On the first empty line in the CSS field, paste the code below:
   

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

3. Replace the existing "Block Wrap" code with the Block Wrap ID that you copied in the Inspect tool (replace everything between the . icon and the { icon). Click Save.
   
   
4. OPTIONAL: Choose the color of your text and background by swapping out the color hex codes. You can find color hex codes here. Once you choose your colors, replace the placeholder hex codes with the code of your choice. Click Save.
   
   

Step 4: Add custom JS

1. Select Body JS on the left-hand sidebar of the Developer dashboard.
2. On the first empty line in the Body JS field, paste the code below:

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

3. Replace the existing "Block Wrap" code with the Block Wrap ID that you copied in the Inspect tool (replace everything between the . icon and the ' icon). Click Save.
   
   

Step 5: Preview and publish

After completing the above steps, preview your website to see how the banner looks. If everything looks good, then you can click the Publish button at the top of your dashboard to push it live on your site! If the banner is not appearing, please review each step above to make sure nothing was overlooked.