[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
    Posts
  • #1283546
    Mats

    hubspotblog

    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?

    TIA

    #1283811
    David
    Staff
    Customer Support

    Hi there,

    this method is quite simple to follow:

    https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

    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>
    </div>
    
    <script>
    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 + "%";
    }
    </script>

    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%;
    }
    #1284123
    Mats

    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!

    #1284416
    David
    Staff
    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.