Make the navbar transparent and change its color when scrolling in Zelle

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

This guide will teach you how to make the navigation bar transparent on top of the page, and change its color automatically upon scrolling down the page. 

An example of this feature can be seen on our Hestia PRO demo right here. You can try scrolling down the page and back on top to see how the navigation bar behaves.

In order to achieve a similar behaviour with Zelle's navigation bar, we need to use a bit of jQuery. Zelle already has jQuery installed so you do not need to worry about getting it.

First of all, you need to install a new plugin called Header and Footer Scripts where we will be adding the code needed to change how the navigation bar works.

After installing and activating this plugin, you will need to navigate to  Settings -> Header and Footer Scripts and you should be able to notice something which basically looks like a place where you can add text:

In the text field called  Header scripts, you need to add the following code:

<script type = "text/javascript" >
    window.addEventListener('DOMContentLoaded', (event) => {
        jQuery('div#main-nav.navbar').css("background-color", "rgba(255, 255, 255, 0.2)");
        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() > 0) {
                jQuery('div#main-nav.navbar').css("background-color", "#000");              
            } else {
                jQuery('div#main-nav.navbar').css("background-color", "rgba(255, 255, 255, 0.2)");
            }
        });
    }); 
</script>

You can, of course, change the colors according to your preferences. For instance, if you would like the navbar to be more transparent, you need to lower the opacity coefficient from rgba(255, 255, 255, 0.2). The coefficient is currently 0.2 and you can increase or decrease its value according to your needs.

Also, in this guide we will be using the colors in the HEX-code representation. In order to pick your own color or to check what colors from this guide look like, please check this website > https://htmlcolorcodes.com/

Once the code is added, you need to press on the  Save settings button which should be located at the bottom of the same page as you can notice in the picture above and that's all!

Furthermore, if you would like to change the text color of the menu items, Site title and Site description as well, there are a few adjustments that can be added to the code above.

<script type = "text/javascript" >
    window.addEventListener('DOMContentLoaded', (event) => {
        jQuery('div#main-nav.navbar').css("background-color", "rgba(255, 255, 255, 0.2)");
        jQuery('div#main-nav.navbar li a').css("color", "#FFA500");
        jQuery('.navbar-brand .site-title-tagline-wrapper .site-title a').css("color", "#FFA500");
        jQuery('.navbar-brand .site-title-tagline-wrapper p.site-description').css("color", "#FFA500");
        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() > 0) {
                jQuery('div#main-nav.navbar').css("background-color", "#000");
                jQuery('div#main-nav.navbar li a').css("color", "#FFF");
                jQuery('.navbar-brand .site-title-tagline-wrapper .site-title a').css("color", "#FFF");
                jQuery('.navbar-brand .site-title-tagline-wrapper p.site-description').css("color", "#FFF");
            } else {
                jQuery('div#main-nav.navbar').css("background-color", "rgba(255, 255, 255, 0.2)");
                jQuery('div#main-nav.navbar li a').css("color", "#FFA500");
                jQuery('.navbar-brand .site-title-tagline-wrapper .site-title a').css("color", "#FFA500");
                jQuery('.navbar-brand .site-title-tagline-wrapper p.site-description').css("color", "#FFA500");
            }
        });
    }); 
</script>

This code is changing the menu text colors, site title color and site description color into white when the navigation bar is black, and into orange when the navigation bar is transparent. 

You can change the white and orange colors according to your personal preferences. 

Every color can be customized. If you would like to better understand where to change the colors, in the picture below I will point out which lines of code are changing the Site title, Site description and Menu items text colors:

As you can see in the picture above I have assigned numbers from 1 to 3 to different lines of code:

1. It's the line of code that is changing the color of the Menu items
2. It's the line of code that is changing the color of the Site title
3. It's the line of code that is changing the color for the Site description (the text below the Site title)

In order to pick your own color or to check what colors from this guide look like, please check this website > https://htmlcolorcodes.com/

Save the changes and that is all!