How to add Read Meter below Sticky Navigation

Hi there,

i think most of the plugins out there use Javacscript to inject the DOM element for the reading bar. And thats probably going to happen on document load. Which is a problem, as the Sticky Navigation is created using Javascript so it won't be there on document load.

So there is this method i provided here ( for reference ):

https://generatepress.com/forums/topic/scroll-bar-at-the-top-which-shows-how-much-the-content-is-scrolled/#post-1673616

And we can make some subtle changes to that so it sits inside the sticky nav. Is that of interest to you - let me know and i'll rejig the steps :)

Sure. Please proceed.

I want to show in below the sticky navigation.

Thanks David!

Might take a bit of trial and error :) But lets see if we can make it happen.
We're going be adding a couple of hooks in Appearance > Elements:

https://docs.generatepress.com/article/hooks-element-overview/

The two hooks will have the same Display Rules Location - i assume Posts > All Posts

1.Hook #1 generate_inside_navigation
Add this HTML to the Hook:

<div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
</div>

2. Hook #2 wp_footer

<script>
window.onscroll = function() {progressScrollBar()};

function progressScrollBar() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progressBar").style.width = scrolled + "%";
}
</script>

3. Now we need some CSS:

.progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px; /* height of bar */
  background: #ccc; /* Background color */
  z-index: 10000; /* increase z-index to bring in front of slider */
}

.progress-bar {
  height: 8px;
  background: #4caf50; /* Progress bar color */
  width: 0%;
}

Give that a shot - and if you can share a link to the site its on i can take a look at any tweaks that are needed.

It's working like charm!

Thank you so much!!

Awesome - first time :)
Glad to be of help