How to Create a Sticky Navigation for Astra Starter Templates (with the free Version of Astra)

Preface

Ever wanted to make your navigation sticky for the Astra Starter Templates without the need to buy the Pro Version of Astra? Yes? Well then this article is perfect for you! Because in this tutorial we are going to show you how to make your navigation sticky for the free version of Astra. All we need is some CSS and JavaScript.

Please remember that this tutorial is only a workaround. If you are new to coding or want to take more control over your navigation we highly recommend that you buy the awesome Pro Version of Astra. This is because the Pro version already includes a sticky header. You can read more about the sticky header feature here.

As a real world example for this tutorial we will be using the Learn Dash Academy Template which can be downloaded for free. This template covers all relevant issues than can arise when dealing wiht a sticky navigation. As you can see from the Live Demo of the original Template, the navigation sticks on the top and does not scroll when you scroll.

This is what we are going to fix in this tutorial. As a final result the navigation will follow you when you scroll. Furthermore it will also dynamically change colors when needed. The animation below shows you how this will look:

Hint: In case you don’t know how to install templates for Astra, read our Tutorial on how to Install Astra Templates.

The tutorial has the following structure. First of all we are going to talk about our theoretical approach on how to apply a sticky navigation. After that we will elaborate the full code for the sticky navigation step by step. When you are just interested in the code you can skip the theoretical section of course ;).

Theoretical Approach

In this section we will discuss the theoretical approach for the sticky navigation step by step. The basic concept is pretty simple. However for a proper implementation we have to consider four different states for the navigation.

The Basic Concept

In general, what we want is the following. The existing navigation should stay on

1. a fixed position and
2. at the top.

You can achieve this easily with some lines of CSS.

First we need to find the existing class that holds the navigation. This class is (for the Learn Dash Academy Template).main-header-bar-wrap.

Hint: You can use your browsers DevTools to inspect the code and search for the needed class. Usually you can access this Tool by clicking F12. Further information:
Chrome
Firefox
Safari

After we successfully found the class we need, we can add two new properties to it in order to achieve what we want:

1. We give the navigation a fixed position with the property position:fixed
2. We want it to stay on top above everything else. You can do this with a high value for the property z-index. So we add z-index:99999

Additionally we also have to add the property width:100% to the class we have found for the navigation. This is because when using a fixed position property on an element it will loose it’s inherited width. As the navigation has a full width we therefore add a value of 100%.

Finally the CSS code for the navigation bar looks like this:

.main-header-bar-wrap{
    position: fixed;
    z-index: 99999;
    width: 100%;
}

If we would add this code to our style.css file in the themes directory then our navigation would already be sticky. That was pretty simple, right? Well unfortunately we are not done yet.

Extending the Basic Concept

The described basic concept works well for a lot of navigations already. Hence for our example this concept is not enough. All in all we have two big issues to deal with:

• The first issue is the transparency of the navigation. It only looks good at the very top of the theme. Once you scroll down the white color of the links as well as the logo in the navigation are not legible anymore. This is because the background of the theme is already white.
  
  The solution is that we want the navigation to have a background-color, link color and a different logo once we scroll down.
• The second issue is the mobile version of the navigation. For the mobile version of the theme we only have to change the background-color and use a different logo once we scroll down. The link colors are already fine (the colors already change in the mobile version of the theme).
  
  The solution for the second issue is that we have to differentiate between a desktop/tablet version of the navigation and a mobile version.

All in all we have to differentiate four different states of the navigation. A state for the navigation…

• at the very top. For desktop and tablet
• while scrolling. For desktop and tablet
• at the very top. For mobile
• while scrolling. For mobile

In the following we will first of all look at how we can change the background-color, link color and the logo in general. Then we will consider the mobile version.

Changing Background-color, Link Color and Logo while scrolling with JavaScript

We will achieve a dynamic change of the background-color, link color and the logo by using some JavaScript (jQuery).

Hint: When you use an Astra Template (with the Page Builder Elementor) then jQuery is already built in. If you are using other sorts of Templates or Themes, please make sure that jQuery is running.

Here is the concept we want to recreate with our script:

Step 1: Find out when a user scrolls

Step 2: When scrolling happened, distinguish between two states:

1. If a scrolling is above a certain threshold -> apply the look of the navigation for scrolling
2. If a scrolling is below a certain threshold -> apply the look of the navigation for the very top

Let’s make some code out of this concept.

Registering scrolling above/below a threshold

The core script looks something like this

var threshold = 100;
if (jQuery(document).scrollTop() > threshold) {
    //Our Code when the user scrolls above threshold
}else{
    //Our Code when the user scrolls below threshold
}

What does this code do? First we define a threshold (in this example it is 100). When the user scrolls more than 100px from the top, then the code inside the if-statement is fired. Otherwise the code in the else-statement is fired.

Change the background and link color

To change the background-color and link color, we use CSS. We apply the CSS to our class for the navigation (background-color) or to classes that are children of this class (link color). To keep the tutorial simple we apply the CSS with the help of jQuery. In order to add properties to CSS Classes/IDs with jQuery do the following:

jQuery(".main-header-bar-wrap").css({
    "background":"white",
    //Add some more properties in the form of "property":"value"
});

To change the link color we can apply the exact same approach. Instead of changing the background property, we have to change the color property of the a attribute of the links.

In our example the links are nested within the navigation, meaning they are a “child classes” of our main navigation class .main-header-bar-wrap. So for our example we use the following code to access and color the links:

jQuery(".main-header-bar-wrap .main-navigation a").css({
    "color":"#0984e3",
});

As a color for the links we use a certain hex-value of blue, which is used in many places within our example Template.

Changing the logo

In order to change the logo we have to change the attr value of the existing img attribute. The approach is very similiar to changing the link color. The image is a child class of our main navigation class. Consequently we do the following with jQuery:

jQuery(".main-header-bar-wrap .site-logo-img img").attr("src","<path/to/>learn-dash-blue-logo.svg");

In our example the theme already comes with two different logos. They are called learn-dash-blue-logo.svg and learn-dash-white-logo.svg. We are using these logos for this example. Please notice that you have to provide the correct path to your logo.

That’s the whole concept for changing the background-color, link color and changing the logo.

Considering a mobile view

The last thing we have to do is differentiating between a desktop/tablet view and a mobile view. Therefore we take advantage of the themes CSS breakpoints.

Hint: What are CSS breakpoints? CSS breakpoints are certain defined points where a website content responds according to the device width. This is done to show the best possible layout of a website based on the viewing device.

The breakpoint for the mobile view in our example is 768px (This is a very common value for a breakpoint). The breakpoint works as follows. Every device (this can also be your browser window on the desktop) with a width that is below 768px will be considered a mobile view.

With this in mind we have to do the following. We check the width of the browser window. If this width is above 768 we use our code for the desktop/tablet version. Otherwise we will use a different code which is for the mobile version.

Let’s extend our existing core script with this concept.

var threshold = 100;
if (jQuery(window).width() > 768) { 
    // Desktop or Tablet 
    if (jQuery(document).scrollTop() > threshold) {
        //Our Code when the user scrolls above threshold on desktop/tablet
    }else{
        //Our Code when the user scrolls below threshold on desktop/tablet
    }
}else{
    // Mobile
    if (jQuery(document).scrollTop() > threshold) {
        //Our Code when the user scrolls above threshold on mobile
    }else{
        //Our Code when the user scrolls below threshold on mobile
    }
}

That’s it. We have successfully created the core of our code. Now its time to put everything together.

Full Code

In the following we provide you with the full code. The full code is packed in one JavaScript file. To make life a little easier we also added the CSS from our basic concept to the javaScript file.

To make this code work properly, you have to provide a working path to the two versions of your logo.

/*
Sticky Navigation for Astra Templates
©️ STARTMAKINGWEBSITES.COM
*/
jQuery(document).ready(function() {	
	jQuery(".main-header-bar-wrap").css({
		"position": "fixed",
		"z-index": "99999",
		"width": "100%",
		"transition": "all 0.5s"
	});	
  jQuery(window).scroll(function() {
	  var threshold = 100;
	// Desktop or Tablet
    if (jQuery(window).width() > 768) {      
      if (jQuery(document).scrollTop() > threshold) {
		jQuery(".main-header-bar-wrap").css({
			"background":"white",
		});
		jQuery(".main-header-bar-wrap .main-navigation a").css({
			"color":"#0984e3",
		});
		jQuery(".main-header-bar-wrap .site-logo-img img").attr("src","path/to/learn-dash-blue-logo.svg");
      } else {
		jQuery(".main-header-bar-wrap").css({
			"background":"none",
		});
		jQuery(".main-header-bar-wrap .main-navigation a").css({
			"color":"white",
		});
		jQuery(".main-header-bar-wrap .site-logo-img img").attr("src","path/to/learn-dash-white-logo.svg");
      }
    }else{
	// Mobile
	if (jQuery(document).scrollTop() > threshold) {
		jQuery(".main-header-bar-wrap").css({
			"background":"white",
		});
		jQuery(".main-header-bar-wrap .site-logo-img img").attr("src","path/to/learn-dash-blue-logo.svg");
      } else {
		jQuery(".main-header-bar-wrap").css({
			"background":"none",
		});
		jQuery(".main-header-bar-wrap .site-logo-img img").attr("src","path/to/learn-dash-white-logo.svg");
      }
	}
  });
});

Did you notice something in the code? 😛 As a bonus we have added a "transition":"all 0.5s" (line 10) to our CSS for the navigation class. This makes the animation (aka transition) between the different navigation states look smoother and more professional.

Save the code above in a new file and call it something like stickyNav. Give the file the ending js which stands for JavaScript. Example: stickyNav.js.

Now the final step is to tell WordPress to use our newly created JavaScript. To do so add the following code to your functions.php.

function stickyNav(){
 wp_enqueue_script('stickyNav-js', get_stylesheet_directory_uri() . '/stickyNav.js', array('jquery'), '1.0', true);
 }
add_action( 'wp_enqueue_scripts', 'stickyNav',15 );

Hint: You don’t know what the functions.php is in WordPress and need a little help at this point? Then check out our post on the WordPress functions.php.

This code will load the stickyNav.js file we have created, when the theme is loaded. This code searches for the script in the root of your Template (get_stylesheet_directory_uri()). When you want to use the script in another place you have to adapt the path accordingly (get_stylesheet_directory_uri().'path/to/stickyNav.js').

Conclusion

In this post you have learned how to create a navigation that stays on top of your awesome Theme or Template. With the help of some jQuery we were able to also adapt the navigation dynamically to some more advanced problems like changing colors while scrolling or a dedicated mobile view. With all that you should be good to go to tackle all sorts of issues when creating your own sticky navigation.

However once again, we want to inform you that this tutorial can only be a workaround. Therefore we recommend you to buy the Pro Version of Astra which comes with a sticky header feature out of the box.