Transparent Fixed Header, Non Transparent on scroll

Support
#1

Dear support,

Having a bit of an issue. Tried to create the following menu effect: http://www.cefoodexperience.ca/ . We want the menu to be transparent initially to fully display the Top image. After scrolling down we’d like to have the current menu. So from Transparent to non transparent on scroll. Tried numerous solutions offered while searching through the forums here. Problem however is that most of them are dated around 2015 and give different effects.

While googling i found the following webpage: https://xthemetips.com/transparent-fixed-header/129/ Sadly enough this option doesnt work.

Any tips or solutions i could try to get the desired effect?

Kind Regards,

Kishan Krishnasing

1 Like
#2

Hi There,

  • Please add the following CSS under Customizer > Custom > Global CSS:
.x-navbar.x-navbar-fixed-top.scroll-nav {
    background-color: rgba(249, 232, 232, 0.75) !important;
}

.x-navbar.x-navbar-fixed-top {
    background-color: transparent !important;
}

.x-navbar .desktop .x-nav > li > a {
    color: #fff;
}

.x-navbar.scroll-nav .desktop .x-nav > li > a {
    color: #000;
}
.x-navbar.scroll-nav .desktop .x-nav > .current-menu-item > a {
    color: #de973d;
}

.home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
}
  • After that add the following code under Customizer > Custom > Global Javascript:
jQuery(function($) {
	$(window).scroll(function(){
        if($(window).scrollTop() > 0){
        	$('.x-navbar').addClass('scroll-nav');
        } else {
        	$('.x-navbar').removeClass('scroll-nav');
        }
    });
});
#3

Hey there,

I tried adding this code to my menu bar as well, and it did not work.

#4

Hi @hiddenblueprint,

Thanks for writing around! Can you please provide us the URL of your site so we can take a look?

Thanks!

#5

Hey Nabeel,

I’ve made a separate post about this. Thanks for the help though!

#6

Hi again

Thanks for the update, we’ll reply you on your thread then.

Cheers!