How to make Hestia navbar transparent for other pages

Hestia theme provides a transparent navbar option, but it works only on the homepage. This article shows you how to create a transparent header on other pages as well. Hestia Free supports this action using a custom code, whereas Hestia Pro has a dedicated toggle.

Hestia Free

⏪ Before

On a regular page, the navbar appears with a certain color, as you can see in the screenshot below.

⏩ After

If you want to show the transparent navbar on other pages, we can achieve this with a custom jQuery function.

To add this function, we recommend you use our plugin Orbit Fox. This plugin enables a Header Footer Scripts module under the customizer that allows you to add custom scripts to the header and footer of your website.

📝 Note: For more details about the Orbit Fox, please check this guide.

Navigate to Appearance > Customize > Header / Footer scripts and add this code:

<script>
jQuery( document ).ready(function() {
 transparentHeader ();
});

jQuery(window).on('scroll', function() {
 transparentHeader ();
});

function transparentHeader () {
     if (jQuery(window).scrollTop() === 0) {
        jQuery('body:not(.home) .navbar-default').removeClass('navbar-not-transparent').addClass('navbar-transparent');
    } else {
        jQuery('body:not(.home) .navbar-default').removeClass('navbar-transparent').addClass('navbar-not-transparent');
    }
}
</script>

📝 Note: The checkbox in the customizer that controls whether you have a transparent header enabled or disabled will still affect only the homepage. If you decide to stop using a transparent header on all pages, you should remove this script.

Hestia Pro

Hestia Pro allows you to enable transparent header on other pages/posts using a dedicated toggle.

1. Navigate to the desired post/page and open it in the editor.

2. Open the Post (or Page) panel from the right sidebar.

3. Expand the Post Settings (or Page Settings) accordion and check the Enable transparent header option.