How Do I Change My Website Navigation Bar to a Solid Colour in the Hero 1.0 Theme?

This Article Is For

This Article Is For:

• Users with "Manage Website Settings" permissions
• Users comfortable working with custom HTML code (provided below)
• Applicable to: Hero 1.0 Theme

Overview

This article explains how to make your website navigation bar a solid colour using the SoCast Platform with the Hero 1.0 Theme. You will need to add a small piece of custom CSS code to your Website Settings.

Step-by-Step Guide

1. Log in to the SoCast Platform.
2. Click Settings in the top-right corner.
3. Navigate to Website Settings > Website.
4. Scroll down to Website Settings and click Website, if needed.

   

5. Scroll down to the Custom Header HTML field.
6. Paste the following CSS code into the Custom Header HTML field:

<style>
#stickyHeader, #ribbon, .ribbon-content.site_width {
    background-color: black !important;
}
</style>

Note: Replace black with any valid colour name or hex code (e.g., #FF0000 for red) to match your branding.

If another <style> tag already exists in the Custom Header HTML field, copy only the code between the <style> tags and paste it within the existing <style> section.

7. Click Save.

   

8. Your navigation bar should now display as a solid colour.

   

Custom Header HTML Code

#stickyHeader, #ribbon, .ribbon-content.site_width {
    background-color: black !important;
}

If you have any questions or need further assistance, please contact SoCast Support.