3

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!

4

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:

CSS

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

jQuery

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

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 Apr 11 '16 at 12:43
  • Template is probably poorly made then. You need to reviews it's code and change it there directly. – Alexxandar Apr 11 '16 at 16:40
  • i have changed the code and it worked, thank you! – Heba Apr 12 '16 at 8:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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