Docs

[Weltstudent]

Hi,

I´ve followed the instructions out of the following topic to achieve a transparent navbar showing the slider right below it.

https://community.theme.co/forums/topic/transparent-top-navbar-solid-fixed-navbar/page/2/

So far it worked great for my homepage. But unfortunately the code affects the navbar on all other pages as well. But there I just want it to have a certain background and stay fixed on top.

I´ll provide my site & login in a private post below.

thank you!

[Weltstudent]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To make sure that the JS code will only affect your homepage, please update it and make use of this code instead:

jQuery(document).ready(function($) {
    $('.home .x-navbar-fixed-top').attr("style", "background-color: rgba(50, 58, 69, 0) !important;");
    $('.home .x-navbar-fixed').attr("style", "background-color: rgba(50, 58, 69, 0) !important;");
    $(window).scroll(function() {
        if ($(this).scrollTop() > 150) {
            $('.home .x-navbar-fixed-top').attr("style", "background-color: rgba (50, 58, 69, 1) !important; transition: background .5s ease-out;");
        } else {
            $('.home .x-navbar-fixed-top').attr("style", "background-color: rgba(50, 58, 69, 0) !important; transition: background .5s ease-in;");
        }
    });
}); 

And by the way, I’d recommend that you clear your caching plugin, and disable it during development. This can cause Customizer changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Please let us know how it goes.

[Author]

Posts