Patrick Smits Patrick Smits - 1 month ago 6
CSS Question

sticky menu in a joomla site won't work

I have the following website:

website

With the following JS:

$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('.menu-2-section').addClass('smallheader');
}
else {
$('.menu-2-section').removeClass('smallheader');
}
});
});


In the CSS I will have then:

.smallheader {position: fixed; top: 0; z-index:150;}


I There must be something wrong with the code, but What?

Please, I need some help with this ;-)

Thanks!!!

Answer

Code you write in question is good, and works well. Notice that you need to add 'smallheader' class to object you want to make static/fixed position, in your case it should be .menu-2-section

but for now, you can't see menu because it's hidden by #top div.

#top {
    background-color: #eda99d;
    margin: 0 auto;
    padding: 15px 0;
    width: 100%;
    z-index: 999;
}

you need to change z-index here to less then 150, or change z-index in .smallmenu to greater then 999