Recent searches


No recent searches

Sticky header menu

Answered


Posted Apr 05, 2018

Hi there,

We are relatively new to Zendesk and don't know all its functionality.

We'd like to make the header menu sticky so that it doesn't disappear when you scroll the page down.

How is it possible to do?


0

2

2 comments

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

0


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

0


Post is closed for comments.

Didn't find what you're looking for?

New post