Keep glossary header visible when scrolling

When you view the Glossary, the title and the quick-links to each letter will disappear as you scroll the page:

If you have a lot of glossary terms and you're linking to your glossary in your table of contents, you may want to make the glossary header "sticky" so that it's always visible when readers scroll, like this:

To make your glossary header and navigation sticky like this, you can:

1. Create a snippet to store the code that will keep the header and navigation always-visible. Refer to Create the sticky glossary header snippet.
2. Add that snippet in Customize > Style > Custom HTML > Body. Refer to Add sticky glossary header snippet to Style.

Refer to the linked sections below for more detailed step-by-step instructions.

Create the sticky glossary header snippet

1. knowledge base, you'll create a snippet to store the code and then add that snippet to the Custom HTML:
2. In the lefthand navigation, go to Snippets. The Snippets page opens.
3. Select + Create New Snippet to begin creating a new snippet. If you're unfamiliar with creating snippets, refer to Create a snippet for more detailed instructions.
4. Enter a Snippet Name, for example Sticky glossary header.
5. Enter a Snippet Description, for example Make the glossary header "sticky" so it's always visible as people scroll..
6. Select the Snippet Content dropdown and select Code Editor:
7. Copy the script below and paste it into the Code Editor:

   <script>
     $(function(){
       // Adjust the pathname listed below depending on your KB settings. It might be 'help/glossary', '/home/glossary', or '/docs/glossary'
       if(window.location.pathname == '/help/glossary') {
         if($('.ko-content-cntr').length > 0)
           var articleCont = $('.ko-content-cntr');
         else 
           var articleCont = $('.documentation-article');
         var articleWidth = articleCont.width();
         var navTop = $('.hg-header').outerHeight(true);
         var topDiv = $('<div/>', {class: "ko-glossary-topdiv"});
         articleCont.prepend(topDiv);
         topDiv.append($('h1.page-header')).append($('div.glossary-jump-to'));
         var topOfJumpto = topDiv.offset().top;
         var jumptoHeight = topDiv.outerHeight(true);
         topDiv.affix({
           offset: {
             top: topOfJumpto - navTop,
           }
         });
         //add dynamic reusable styles
         $('<style>.ko-glossary-topdiv.affix{top:'+navTop+'px;width:'+articleWidth+'px;background:#fff;}.ko-glossary-topdiv.affix + .glossary-terms-wrapper{margin-top:'+jumptoHeight+'px}</style>').appendTo('head');
       }
     });
   </script>
   
   <style>
     /* Make sure that glossary header doesn't cover content when you jump to a letter */
     .hg-minimalist-theme.hg-glossary-page a:not([href]):not(.ko-anchor-icon) {
       display: block;
       height: 175px;
       margin-top: -175px;
       visibility: hidden;
     }
   </style>

8. The script assumes you're using the /help/ root path. If you're using one of the other root paths, in row 4, edit '/help/glossary' to match your knowledge base's root path:
   1. For /home root path, use  '/home/glossary' .
   2. For /docs root path, use '/docs/glossary' .
9. Select Create to create and save your snippet.

Once your snippet is created, copy the Merge Code Value from the snippet editor, for example {{snippet.stickyGlossaryHeader}}. You'll need it in the next step.

Add sticky glossary header snippet to Style

With the snippet Merge Code Value for your sticky glossary header snippet copied:

1. Go to Customize > Style (HTML & CSS).
2. In the Customize HTML, CSS, and JS section, select Custom HTML.
3. Select Body from the Select HTML section to edit dropdown.
4. Paste the snippet merge code value into the Body Custom HTML editor pane. For example, here we've added it at the very bottom:

   <div class="row hg-site-body slideout-new">
       [template("layout")]
     
   </div>
   <div class="row ko-site-footer text-center xsize">
       <div>Copyright © 2025 Your Company, LLC. All rights reserved.
           <br>Made with <a href="https://www.knowledgeowl.com" target="_blank">KnowledgeOwl</a> <img class="ko-logo" src="https://dyzz9obi78pm5.cloudfront.net/app/image/id/65cbb573a7123f123624c722/n/favicon-32px.svg">
       </div>
   </div>
   
   
   

5. Be sure to Save your changes.

Your glossary's header will now remain "sticky" and display regardless of how far down the page your reader is.