How to make fixed menu?

How to make fixed menu on top when use the scrolling?

My template is Sparks Multipurpose based on Sparks 2.0.

Try to add in layout.css, if that doesn't help try adding this code on bottom of template_css.css


.sparky_full.logorow{
position:fixed;
width:100%;
top: 65px;
z-index:100;
}
.sparky_full.toprow{
position:fixed;
width:100%;
z-index:100;
}

you may need to adjust top position

ivan.milic wrote: Try to add in layout.css, if that doesn't help try adding this code on bottom of template_css.css


.sparky_full.logorow{
position:fixed;
width:100%;
top: 65px;
z-index:100;
}
.sparky_full.toprow{
position:fixed;
width:100%;
z-index:100;
}

you may need to adjust top position

your code not working 100%. But I have the solution, see the code.

in botton from template_css.css put the code

.sparky_full, .logorow, .one {
width:100%;
top: 65px;
z-index:100;
}
.fix_menu {
position: fixed;
margin-top: -70px !important;
background: #fff;
}

Now, you need load jQuery on page.

var offset = jQuery('.sparky_full.logorow.one').offset().top;
var $meuMenu = jQuery('.sparky_full.logorow.one');
jQuery(document).on('scroll', function () {
if (offset <= jQuery(window).scrollTop()) {
$meuMenu.addClass('fix_menu');
} else {
$meuMenu.removeClass('fix_menu');
}
});

Fine works, 100%.