Sticky header menu

Answered

2 Comments

  • Customer Support Theme
    Comment actions Permalink

    Hello @Lucas,

    You have to need to customize some code.

    After login > Go to the "Customize design" option (appearing on the left side) > Edit your Live Theme

    If you are using "Zendesk Copenhagen Theme" just do steps - 

    Go to the "header.hbs" file > Add an HTML tag in the top and also close the tag in the bottom.

    <section class="hc_header">
    ZENDESK DEFAULT CODE
    </section>

    Add CSS in the bottom area - 

    <style>

    .sticky_header {
    background: #ffffff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
    }

    </style>

    Add SCRIPT in the bottom area - 

    <script>

    $(window).scroll(function(){
    var sticky = $('.hc_header'),
    scroll = $(window).scrollTop();
    if (scroll >= 100) sticky.addClass('sticky_header');
    else sticky.removeClass('sticky_header');
    });

    </script>

    You can also add your CSS and JS in "style.css" and "script.js" file.

    After adding all this, click on the SAVE/PUBLISH button.

    If face any issue please let us know.

    Thanks

    Customer Support Theme Team

    2
  • Lucas
    Comment actions Permalink

    Thanks a lot, Customer Support Theme! I'll try your solution.

    0

Please sign in to leave a comment.

Powered by Zendesk