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 WordPress.org (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.

    https://imgur.com/a/ySXop1e

    https://speakpartner.kr/%ed%85%8c%ec%8a%a4%ed%8a%b8-%ea%b8%80%ec%9e%85%eb%8b%88%eb%8b%a4/

  • 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.

    https://imgur.com/a/ZeH3Qdv

  • Where can I see this issue?

  • https://speakpartner.kr/%ec%9d%b4%ed%9a%a8%eb%a6%ac-%ec%98%81%ec%96%b4%ed%9a%8c%ed%99%94-%ec%96%b4%ed%94%8c-%ec%8a%a4%ed%94%bd-speak/

    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’.

    <script>
    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
      document.documentElement.style.setProperty('--scroll-percentage', scrolled + '%');
    }
    </script>

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

    <style>
    :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;
    }
    </style>

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

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

    https://imgur.com/a/5fbh9OR

  • 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.