I'm using helix3 template and I want to make the menu sticky to the top of the page, and to change its style when scrolling. how can I achieve that!

2 Answers 2


Based on the template demo and , I put together a quick solution using jQuery and CSS, but if your template has been customized, this might not work as expected:


.fixedMenu {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;


jQuery(window).bind('scroll', function () {
    if (jQuery(window).scrollTop() > 90) {
        jQuery('#sp-header').addClass('fixedMenu ');
    } else {
        jQuery('#sp-header').removeClass('fixedMenu ');

Having done a quick Google search (hint), I believe the Helix 3 templates supports a fixed/sticky header in the Template Options:

enter image description here

  • It didn't work! but thank you anyway.
    – Heba
    Commented Apr 11, 2016 at 12:43
  • Template is probably poorly made then. You need to reviews it's code and change it there directly.
    – Alexxandar
    Commented Apr 11, 2016 at 16:40
  • i have changed the code and it worked, thank you!
    – Heba
    Commented Apr 12, 2016 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.