Add Sitewide Banner Above Top Navigation

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

1. Navigate to your website's Content panel and select Footer under the Global Settings section.
   
2. Create a new Text Block by clicking one of the green (+) buttons 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: Preview the Page and Copy the Block Wrap ID

1. In a new browser tab, open up spacecrafted.com/preview to open up a preview of your website. 
2. Once the website is pulled up, right-click (or CTRL+click) anywhere on the page, then select Inspect from the menu that appears.
3. You will see the content you added in the website's Footer. 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. Navigate to the Developer Tools dashboard by clicking the [<>] icon at the top of the page (Don't see that icon? Learn more here.), then navigating to the CSS page.
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 at the top of the Developer Tools 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 green 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.