[janetmsewellParticipant]

Hi,

I’ve tried for the better part of the day, followed the advice of several forum answers but still can’t get it to work the way I want.

I’m trying to create a menu which is transparent while at the top, but then as we start scrolling down it gradually becomes gray (#2d2d2d) with an opacity of 0.5
The gradual effect I’m looking for is similar to this page: https://www.meetmyguide.com/ but instead of becoming white, it becomes a semi transparent gray color

Please could you help me?

URL: hm.hellenicministries.org
WP Version 4.7.3
X Version: 4.6.4

[JoaoModerator]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.x-navbar.x-nav-trans {
    background-color: rgba(1,1,1,0.4) !important;
}

And this to Appereance Customizer Custom Javascript

jQuery(document).ready(function($){
	$('.x-navbar').addClass("x-nav-trans");
	$(window).scroll(function(){
		if( $(this).scrollTop() > 100 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});

Hope it helps

Joao

[janetmsewellParticipant]

Thank you, it seems to work when I initially load the page but (there’s always a but right?!) when I scroll down, it’s fine, but when I scroll back up the menu becomes white – it looses it’s transparency. Could you please help me with that?

[RadModerator]

Hi there,

In that case, please remove this part in that code

else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}

Cheers!

[janetmsewellParticipant]

Perfect! It worked, thank you!

[RadModerator]

You’re welcome!

[Author]

Posts