Navbar transparent over backgroud video

[rukaiyaxo]

Hi

Thanks to your instructions on this post, I’ve successfully;

1. Made my navbar transparent over my Revolution Slider video and;
2. Made the navbar get a white background when you scroll down the website

However, when I scroll back to the top, the navbar still has a white background instead of turning transparent again. The CSS code given to the previous poster doesn’t work for me. Any suggestions please?

Thank you in advance!

[christian]

Hey @rukaiyaxo,

It’s because the fixed top class is not removed and it’s most commonly due to script conflicts. Please clear all caches in your caching plugin. Then, test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

[rukaiyaxo]

Hi Christian

Thanks for your quick response.

I tried that suggestion and unfortunately it didn’t work. Is there anything else that could work? It’s not a big deal, but would be more aesthetically pleasing if the transparency worked after scrolling back up.

Thanks again!

[christian]

Would you mind clearing all the caches again and deactivate all caching in your site and also all the third party plugins? Also uninstall Cornerstone then switch to the default theme and delete X and install it again. Then, go to X > Validation and X will reinstall Cornerstone automatically.

If that does not work, please give us FTP access also. The fixed top class needs to be removed when you scroll back up. Adding additional JS to fix this is not recommended as that should be the expected behavior.

Thanks.

[rukaiyaxo]

Hi Christian

I tried all those things but no luck. I’ve kept the third party plugins deactivated. I’ll send my FTP details now via SecureNote

[rad]

Hi @rukaiyaxo,

Please add this code to your global custom javascript (Theme Options > JS).

jQuery ( function($) {

$(window).scroll( function() {

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

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

}

} );

} );

This should remove the fixed navigation class when it reached the top. It’s never meant to be removed as it should stay fixed after the scroll (up or down). But because your CSS is dependent to x-navbar-fixed-top, then it has to be remove so it would switch the styling too.

Thanks!

[rukaiyaxo]

Amaaazing - it worked, thank you!!

[rad]

You’re most welcome!