[Support request] Progress bar in blog posts

Home Forums Support Progress bar in blog posts

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1283546


    Let’s say I’d want to do like great artists do and steal the idea of the progress bar that you can see on the above site.

    How would I go about it?


    Customer Support

    Hi there,

    this method is quite simple to follow:


    In GP i would:

    1. Create a new Hook Element
    1.1 Add the HTML and JS to its content:

    <div class="progress-container">
        <div class="progress-bar" id="myBar"></div>
    window.onscroll = function() {myFunction()};
    function myFunction() {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      document.getElementById("myBar").style.width = scrolled + "%";

    1.2 Select the inside_navigation hook
    1.3 Set Display Rules to Entire Site.

    2. Enable Sticky Navigation in Customizer

    3. Add the CSS:

    .progress-container {
      width: 100%;
      height: 2px;
      order: 5;
    .progress-bar {
      height: 2px;
      background: orange;
      width: 0%;

    Thanks David!

    This is great!

    Is it possible somehow to make the progress-bar the width of the screen? Now it’s inside the content container.

    Also, nit-picking really, but do you think it’s possible to move the progress bar below the sticky menu, as opposed to above it?

    Thanks again!

    Customer Support

    In Customizer > Layout > Primary Navigation set the Navigation Width and Inner Navigation Width to Full. And add this CSS rule:

    @media (min-width: 769px) {
        .inside-navigation {
            display: flex;
            flex-direction: column;
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.