Patrick Smits Patrick Smits - 9 months ago 35
CSS Question

sticky menu in a joomla site won't work

I have the following website:


With the following JS:

$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
else {

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 ;-)


Answer Source

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