A sticky navigation bar remains visible at the top of the page when users scroll down, improving usability and accessibility. Making it transparent adds a modern and sleek design touch. In this guide, we’ll show how to create a sticky transparent navigation bar in the WordPress Genesis Framework.
In my earlier article, I have mentioned that I have created a health website named abhishekghosh.com for my patients in Bengali/Bangla language. If you look at the screenshot of the website, you’ll realize that the transparency across the whole navigation bar is not the same:
The middle part is translucent, so the site-title and navigation links are completely visible even when text is beneath. I have used the latest (when writing this article) Genesis sample child theme (available on GitHub) to slowly build my custom website. The child theme already had sticky navigation menu – that reduced my work.
---
How Have I Done The Navigation Menu Selectively Translucent?
In my case, I have just modified the style.css file to this one:
1 2 3 4 5 6 | .site-header { background: rgb(255,255,255); background: linear-gradient(86deg, rgba(255,255,255,1) 26%, rgba(255,255,255,0.8540208319655987) 46%, rgba(255,255,255,1) 80%, rgba(255,255,255,0.7475782549347865) 100%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%, rgba(255,255,255,0.764384977623862) 100%, rgba(255,255,255,0.7475782549347865) 100%, rgba(255,255,255,0.9100432409291842) 100%, rgba(255,255,255,0) 100%, rgba(255,255,255,1) 100%); box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); padding: 0 30px; } |
I have used cssgradient.io‘s tool to generate the gradient. It is a linear CSS gradient, I could also use a radial gradient. So, my use case was quite easy because the child theme was ready to be made modern.
How You’ll Do To Make the Navigation Menu Translucent?
If your Genesis theme does not automatically apply the .site-header class (that is probably the rarest case), add the following snippet to your functions.php file:
1 2 3 4 5 | add_filter('genesis_attr_site-header', 'custom_genesis_site_header'); function custom_genesis_site_header($attributes) { $attributes['class'] .= ' site-header'; return $attributes; } |
If you want to detect scroll events (in case you want to make it translucent after the user scrolls down). Genesis does not provide built-in support for detecting scroll events, so we need to add custom JavaScript. You can load a custom JavaScript file like this (you can use Genesis’s function to inject script or Header and Footer plugin):
1 2 3 4 5 6 7 8 9 10 11 | function($) { $(document).ready(function() { $(window).on("scroll", function() { if ($(window).scrollTop() > 50) { $(".site-header").addClass("scrolled"); } else { $(".site-header").removeClass("scrolled"); } }); }); })(jQuery); |
This script detects when the user scrolls past 50 pixels, and then adds the scrolled class to change the background color.
To make the Genesis navigation bar sticky and transparent, add/modify the CSS to your theme’s style.css file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .site-header { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; background: rgba(255, 255, 255, 0.8); /* Adjust transparency */ transition: background 0.3s ease-in-out; } .site-header.scrolled { background: rgba(255, 255, 255, 1); /* Solid background when scrolled */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } body { padding-top: 80px; /* Prevents content from being hidden under the fixed header */ } |
By following these steps, you will have a sticky and transparent navigation bar in the Genesis Framework that enhances both design and functionality. You can tweak the CSS for different colour schemes and adjust the JavaScript as needed.
