top bar background transparent when scrolling

Hi there,

Your top bar isn't turning transparent. You're not seeing it on scroll because it's not sticky. It gets left behind when you scroll. The position: sticky you've added doesn't work.

We can try scripting it to work.

<script>
const topBar = document.querySelector('div.top-bar');

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
		var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
		var siteNav = document.getElementById('sticky-navigation');
		if (st > lastScrollTop){
      if(document.contains(siteNav)){
				if( siteNav.classList.contains('sticky-navigation-transition') ){
					var sn_height = siteNav.offsetHeight;
					
					topBar.style.position = "fixed";
					topBar.style.top = "0px";
					topBar.style.width = "100%";
					topBar.classList.add('fadein');
				}
			} 
		} else {
			console.log("scrolling up "+st);
			if(window.scrollY==0){ 
			 	console.log("Top of page");
				topBar.style.position = "relative";
				topBar.classList.remove('fadein');
			}
		}
	
		lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
</script>

Add this script on a hook element hooked to wp_footer with display rule location set to "Entire site".

does not work.

I have removed the position sticky and the hook that I just created does not make the top bar sticky.

Make sure to clear ALL cache. The previous code is actually working on your site but it wasn't refined.

Try this and check if it behaves better:

<script>
const topBar = document.querySelector('div.top-bar');

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
		var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
		var siteNav = document.getElementById('sticky-navigation');
		if (st > lastScrollTop){
      		if(document.contains(siteNav)){
					var sn_height = siteNav.offsetHeight;
					topBar.style.zIndex = 999;
					topBar.style.position = "fixed";
					topBar.style.top = "0px";
					topBar.style.width = "100%";
				
			} 
		} else {
			console.log("scrolling up "+st);
			if(window.scrollY==0){ 
			 	console.log("Top of page");
				topBar.style.position = "relative";
			}
		}
	
		lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
</script>

this one hides the site title and does not work on mobile :(

this works for the desktop but does not work for mobile:

.top-bar {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 200;
}
.sticky-enabled .main-navigation.is_stuck {
top: 49px !important;
}
@media (max-width: 495px) {
.sticky-enabled .main-navigation.is_stuck {
top: 41px !important;
}
}

spoke too soon. with the above CSS it still does not work.

this one hides the site title and does not work on mobile 🙁

Ah right, this wasn't written for mobile-header. I missed that. My bad.

Let's try this one:

<script>
const topBar = document.querySelector('div.top-bar');

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
		var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
		if (st > lastScrollTop){
			topBar.style.zIndex = 999;
			topBar.style.position = "fixed";
			topBar.style.top = "0px";
			topBar.style.width = "100%";
		} else if(st === 0) { 
			console.log("Top of page");
			topBar.style.position = "relative";
		} else {
			console.log("scrolling up "+st);
		}
	
		lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
</script>

And then add this CSS:

nav#sticky-navigation {
    top: 50px !important;
}

nav#mobile-header.navigation-stick {
     top: 60px !important;
}

not good.

1.the tagline is removed
2. The space between the top bar and nab bar has increased
3. size of the site title is changed. I was using navigation as a header and I like the look of this option but the look has changed now.
4. in tablet does not work correctly

This works for desktop and tablet but does not work for mobile. How can I improve this to work for mobile as well?

@media (min-width: 769px) {
.top-bar {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 99;
}
.main-navigation {
position: fixed;
top: 50px;
left: 0;
right: 0;
z-index: 99;
}
}

The problem with doing pure CSS is, it doesn't take into account the sticky script being used by the theme.

If you use position: fixed; without checking the sticky status of your navigation, the topbar will overlap the main navigation instead of stacking on top of each other.

If you want to use this CSS, you should turn off the sticky navigation on the Customizer settings.

This is to you can just do position:fixed; for both the navigation and the top-bar with few adjustments for mobile-header because you have it enabled.

I am not sure how to make it work for mobile. Can you please elaborate?

I am not sure how to make it work for mobile. Can you please elaborate?

You have Mobile Header enabled. Because of this, you'll need to write a separate CSS for the separate mobile header.

Your CSS doesn't apply on mobile because the media rule @media (min-width: 769px) excludes the mobile viewport.

Add this CSS for your mobile viewport:

@media (max-width: 768px){
.top-bar{ 
    width: 100%;
    position: fixed;
}
.main-navigation {
    position: fixed;
    top: 60px !important;
    left: 0;
    z-index: 99;
}
}

worked. thanks :)