Transparent Menu turn color on scroll

Support
#1

Hey guys,

Sorry to reach out to you about this AGAIN, but I just can’t figure out why this isnt working. I’ve looked through other threads as well as some of my own from way back when, but i just think maybe some of my code is conflicting or something. Could you help me out?

I want the menu to be transparent at the top (on desktop & mobile), but to turn rgba (0, 0, 0, .8) on scroll.

thanks so much

#2

Hi @btbogan,

Thanks for posting in.

Because the previous CSS uses !important, then you should use !important to your fixed navbar’s styling too. Like this

.x-navbar.x-navbar-fixed-top {
    background: rgba(0,0,0,.8) !important;
}

Then you should add this code to your global custom javascript to turn off fixed navbar class when it reach 0 scrolltop.

jQuery ( function($) {

$(window).scroll( function() {

if ( $(this).scrollTop() <= 0 ) {

$('.x-navbar.x-navbar-fixed-top').removeClass( 'x-navbar-fixed-top' );

}

} );

} );

Thanks!

#3

Thanks so much. that is close for sure.

So my other website has it exactly how I want it --> www.lifestyleuni.com
With the transition ease, etc.

How could I get the menu on www.barrettbogan.com to be the same?

thans so smuch

#4

Hi again,

Please add the following code in the Theme Options > CSS:

.x-navbar {
    transition: 0.4s all ease-in-out;
}

Hope this helps!

#5

thanks again.

Is there any way to have both affects happen at the same time?

right now when you scroll it turns black and then a little bit later it shrinks…

I would really like it to feel seamless where it turns black as it shrinks at the same time, just exactly like the other site I mentioned…

Thanks so much

#6

Hello There,

To accomplish what you have in mind, you will need to add this custom JS code:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "65px");
			$('.x-navbar-inner').css("min-height", "65px");
                        $('.x-brand.img').css("margin-top", "11px");
			$('.x-brand img').css("width", "150px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "30px", "height": "65px"});
		} else {
			$('body.x-navbar-fixed-top-active .x-navbar-wrap').css("height", "100px");
			$('.x-navbar-inner').css("min-height", "100");
                        $('.x-brand.img').css("margin-top", "20px");
			$('.x-brand img').css("width", "250px");
			$('.x-navbar .desktop .x-nav > li > a').css({"padding-top": "45px", "height": "100px"});
		}
	});
});
jQuery ( function($) {

$(window).scroll( function() {

if ( $(this).scrollTop() <= 0 ) {

$('.x-navbar.x-navbar-fixed-top').removeClass( 'x-navbar-fixed-top' );

}

} );

} );

Hope this helps. Please let us know how it goes.

#7

thanks but that did not seem to make a difference…?

#8

Hi,

It seems to work fine on my end. Please clear your browser cache and check again.

See Video - https://www.screencast.com/t/61SMSelcVSM

Can you provide us a video showing the issue in your end.

Thanks

#9

hey there,

thank you but www.lifestyleuni.com is the one that is already set perfectly already. It is www.barrettbogan.com that I want to work like the other.

thank you

#10

Hi there,

I have checked www.barrettbogan.com and the menu is displaying correctly where it is transparent initially then gets an opaque background on scroll.

Please try to clear your cache and check the page again.

#11

yes, it has both the effect of turning from transparent to black and the effect of shrinking the menu, however the effects happen at different times taking away from the seamless effect. is there a way to get the two effects to happen at the same time?

thank you

#12

Hi @btbogan

Try modifying this line of code provided by @RueNel here:

if ($(this).scrollTop() > 100) { to something like if ($(this).scrollTop() > 50) {

I believe this should achieve the effect you want.

Thanks.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.