Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Can’t you let the ‘progress bar’ come into the container??

  • Can’t you let the ‘progress bar’ come into the container??

    For better understanding, I will attach the image and website address.

  • What is the hook you are using to insert the bar?

    Change it to inside_site_container, and add this CSS:

    .progress-container {
        position: sticky !important;
  • When I entered the code, the problem I originally told you about has been solved.

    But the problem is that the progress bar was stuck in the header, not the navigation. What should I do?

    I’m attaching the image below.

  • Where can I see this issue?


    This is the url above. Is there a way to get the ‘Progress bar’ to attach to the navigation?

  • Hi there,

    you can try the method provided here for adding a Reading Progress Bar

    It gets attached to the bottom of the navigation including when it is sticky

  • With reference to the attached content, I have removed all HTML, CSS, and SCRIPT related to the existing progress bar.

    By the way, where should I activate ‘GP Sticky navigation’?

    It is currently fully initialized.

  • 1. The code below has been registered as ‘hook – generate_inside_navigation’.

    window.onscroll = function() {updateScrollPercentage()};
    function updateScrollPercentage() {
      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      var scrolled = (winScroll / height) * 100;
      // Set CSS variable'--scroll-percentage', scrolled + '%');

    2. Then, I added the css code below in the customization.

    :root {
    –scroll-percentage: 0; /* Default value */
    .navigation-stick .inside-navigation {
    position: relative;
    .navigation-stick .inside-navigation:after {
    content: ”;
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: var(–scroll-percentage);
    background-color: #0092FF;

    3. However, the following error occurred. (Image attached)

    1. (Can’t save with invalid setting of 1)
    2. (Markup is not allowed in css)

  • Oh! I put them all in ‘elements’ and it’s solved!! Thank you!!

  • Glad to hear that

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.