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

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

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

Info 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 into 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.
    Website Settings Screenshot
  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.
    Custom Header HTML Screenshot
  7. Click Save.
    Save Button Screenshot
  8. Your navigation bar should now display as a solid colour.
    Solid Colour Navigation Bar Example

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.