Back to Community
Home / Community / Theme → Inspiro

How to Control Your Inspiro Theme Header Background Colors and Transparency

29 threads Sep 9, 2025 Theme → Inspiro

Content

Many users of the Inspiro theme want to customize the header's appearance, particularly its background color and transparency behavior. A common point of confusion is the header's default design: it often starts transparent (or with a gradient) on the homepage and then changes to a solid color upon scrolling. This guide will explain why this happens and provide the most effective CSS solutions to gain full control over your header's look on all pages.

Why Does the Inspiro Header Change on Scroll?

The Inspiro theme uses a JavaScript library called Headroom.js to manage the header's behavior during scroll. This script dynamically adds and removes a CSS class called .headroom--not-top when the user scrolls away from the very top of the page. The theme's built-in styles define one appearance for the header at the top of the page (often transparent) and a different appearance for when the .headroom--not-top class is present (often a solid color). This is an intentional design feature to create a dynamic, modern feel.

Common Customization Goals and Solutions

Based on numerous community discussions, here are the most frequent requests and the CSS code to achieve them. You should add all code to Appearance → Customize → Additional CSS in your WordPress dashboard.

1. Make the Header Background Solid on All Pages (Including the Homepage)

If you prefer a solid header background from the moment the page loads, this snippet is the most comprehensive solution. It overrides the transparent and gradient backgrounds for both the initial state and the scrolled state on pages with header images or videos.

.has-header-image .navbar, .has-header-video .navbar {
    background: #fff !important; /* Change #fff to your desired color */
    background-image: none !important;
}

2. Change the Background Color Only When Scrolled

To only change the color that appears after scrolling down, target the .headroom--not-top class. The following code changes the scrolled header background on desktop screens for homepages and other pages with a header image/video.

@media screen and (min-width: 48em) {
    .has-header-image .headroom--not-top .navbar,
    .has-header-video .headroom--not-top .navbar {
        background: #4e608d !important; /* Change to your desired color */
    }
}

3. Adjust the Transparency (Opacity) on Scroll

The scrolled header often has a slight transparency. You can adjust this by modifying the alpha channel in an RGBA color value. A lower value (e.g., 0.5) makes it more transparent.

@media screen and (min-width: 48em) {
    .has-header-image .headroom--not-top .navbar,
    .has-header-video .headroom--not-top .navbar {
        background: rgba(0, 0, 0, 0.9); /* Change the last value (0.9) */
    }
}

4. Apply Changes to Inner Pages (Not Just the Homepage)

A key insight from the community is that the selectors .has-header-image and .has-header-video are typically only applied to the homepage. If your inner pages do not have this class, the above CSS won't affect them. To target headers on all pages, you may need to use a broader selector. However, test this carefully as it can affect other elements.

.headroom--not-top .navbar {
    background: #yourcolor !important;
}
.navbar {
    background: #yourcolor !important;
}

Important: Using broad selectors can sometimes conflict with other theme styles. Always test thoroughly after adding new CSS.

Troubleshooting Common Issues

  • Code isn't working: Ensure you are using the !important rule to override existing theme styles. Check that your color selector is specific enough.
  • Changes only work on homepage: Your inner pages likely lack the .has-header-image class. Use the broader selector mentioned in solution #4.
  • Header suddenly stopped changing on scroll: If this behavior breaks without you making changes, a plugin conflict or theme update may be interfering with the Headroom.js script. Try disabling plugins to test for conflicts.

By using these CSS snippets, you can effectively customize the Inspiro header to match your site's design perfectly. Remember to always clear your cache after making changes to see the results.

Related Support Threads Support