Docs

[ellsworth]

Hi guys,

great work as usual from my favorite theme devs.

I am trying to achieve something relatviely simple
I want to make my navbar transparent when the page loads.
But when I scroll, I’d like to have it fill out and become white bakground.
I’ve found this topic here many times and I’ve tried all of the code associatedd. Still stuck

the code I am using currently in custom > css:

body .x-navbar {
	background-color: rgba(44,62,80, 0.1) !important;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
	position: fixed;
	z-index: 10000;
	width: 100%;	
}

[ellsworth]

This reply has been marked as private.

[ellsworth]

Also, it doesn’t effect the homepage
but on all other pages, I have the breadcrumb feature turned on
and it does not properly align itself under the navbar when at page top
any thoughts on this too

thanks guys

[Thai]

Hi There,

Please update the previous code a bit:

body .x-navbar {
	background-color: rgba(44,62,80, 0.1);
}

After that adding following code under Customize > Custom > Javascript:

(function($){
	$(window).scroll(function(event) {
		if( $(this).scrollTop() == 0 ){
			$(".x-navbar").css('background-color', 'transparent');
		} else {
			$(".x-navbar").css('background-color', 'white');
		}
	});
})(jQuery);

Let us know how it goes!

[ellsworth]

That works, thanks so much guys. God I love this product and the team that supports it.
Never will I do another project without X-Theme.

Last question (at least re: navbars)
How can I make the hamburger icon (when on mobile displays) clear like the rest of the navbar?

right now it stands out as white when page loads.

[ellsworth]

also re: navbar transparency when at top. It totally works, but….
It appears that when I tap the hamburger on mobile it displays the menu with transparency on
It does not do this if any scrolling has been activated
But if I load the page
and click hamburger immediately, it loads with transparency.
is there a special trick to setting it so that mobile menu, when drops down is never transparent.

[Thai]

Last question (at least re: navbars)
How can I make the hamburger icon (when on mobile displays) clear like the rest of the navbar?

right now it stands out as white when page loads.

Please try following CSS:

.x-btn-navbar.collapsed {
    color: rgba(255, 252, 252, 0.7);
    background-color: rgba(255, 252, 252, 0.7);
}

also re: navbar transparency when at top. It totally works, but….
It appears that when I tap the hamburger on mobile it displays the menu with transparency on
It does not do this if any scrolling has been activated
But if I load the page
and click hamburger immediately, it loads with transparency.
is there a special trick to setting it so that mobile menu, when drops down is never transparent.

Please update the previous Javascript code a bit:

(function($){
	$(window).scroll(function(event) {
		if( $(this).scrollTop() == 0 ){
			$(".x-navbar").removeClass('x-white-bg');
		} else {
			$(".x-navbar").addClass('x-white-bg');
		}
	});
	$(".x-btn-navbar").click(function(event) {
		$(".x-navbar").toggleClass("x-white-bg");
	});
})(jQuery);

Also adding this custom CSS under Custom > CSS:

.x-white-bg {
    background-color: #fff !important;
}

Let us know how it goes!

[Author]

Posts