Docs

[Angela Stucky]

Hi, I am making some CSS declarations that only apply to class .x-navbar-fixed-top, so that I can create a background color and logo size that only show when the page has scrolled. The only problem is, when I scroll back up to the top, the class doesn’t go away. In https://community.theme.co/kb/css-class-index/ it says under the Navbar Classes section “Note that the .x-navbar-fixed-top class is added dynamically via JavaScript as the user scrolls down the page and is also removed as the viewport returns to the top of the webpage”, so maybe there is something that I have done that’s making it not function properly.

Any support you can give me on this issue would be greatly appreciated.
I can provide WP admin login if necessary but I don’t have ftp access. Thanks 🙂

[Paul R]

Hi,

To fix it, you can add this under Custom > Javascript in the Customizer.

jQuery(function($) {
   $(window).scroll(function(){
        var y = $(window).scrollTop();
        if (y <= 0){
           $('.x-navbar').removeClass('x-navbar-fixed-top');
        }
    });
});

Hope that helps.

[Angela Stucky]

Hurray! It worked like a dream. Thank you so much.
Below is the css I wrote, if anyone reading this in the future wants to use it:

.x-navbar{
box-shadow: none;
border-bottom: 0;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
.x-navbar.x-navbar-fixed-top {
background-color: rgba(241,241,240,.9);
height: 60px;
}
.x-navbar img{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.x-navbar.x-navbar-fixed-top img{
max-width: 70%;
position: relative; bottom: 25px;
}

[Lely]

Hi There,

Glad it is working now and thank you for sharing you custom CSS.
Hope this helps others.

[Author]

Posts