Hello @benwoony, Nice website you have there! Thank you so much for using my reading progress plugin and for contacting me with your issue.
The ‘bar attach’ parameter should identify the (sticky) element, or elements, you want the bar to attach to, everywhere on your site, so not specifically the article (the plugin will determine the article automatically).
In your case it seems to work with .et_pb_sticky
This means: attach to an element with (css) class name ‘et_pb_sticky’ (the .
means look voor className, a #
means look for id, but your sticky element does not have an id).
If you fill that in the ‘Stick the bar to this element’ field I am confident it should work. Let me know!
Also, if you switch OFF the ‘use whole page to calculate reading progress’ checkbox, the bar will calculate the progress for the article alone excluding comments, footers, etc., which might be more user friendly.
Have a great day! Kind regards,
Joeri
Thank you for the quick reply. Yes, it is working, although, any chance that the bar could be at the bottom of the bar, rather than the top? (Or am I pushing my luck??) 😀
Hi @benwoony, there are a couple of things going on, especially on smaller screens I see a separate reading bar (light purple, not mine…) at the top. Also the sticky header is ‘floating’ a bit there. Otherwise, my reading bar (the darker red one) is below the sticky header.
However: I checked Safari, and indeed the reading bar is at the top of the sticky bar, never seen that before. Have to run now, but will look into the issue this evening, it should definitely not be at the top of the sticky bar.
Get back to you soon,
Joeri
Depending on screensize, there would be another .et_pb_sticky
first in the dom, the bar would attach to that one then (I missed that initially).
I think we can identify the bar you are looking for with this css selector:
.et_pb_section_1_tb_body.cstm_section
That means the reading bar will attach to the first element that has both css classes et_pb_section_1_tb_body
and cstm_section
The trick is, to identify the element uniquely. Preferably by id, but your pagebuilder does not supply one.
Hope this helps!
Kind regards, Joeri
Thank you thank you thank you. That worked !
Just one thing, by the time the .et_pb_section_1_tb_body.cstm_section scrolls to the top, even though the blog post itself is still at the “0” position, it is showing that it is already showing that it is a few % in. I guess (at least in my simple mind) that even though “I do not have the “use whole page to calculate reading progress” is NOT checked.
This is not a huge deal, and frankly, the fact that the progress bar is pretty much where I need it, is good enough. I wish all developers respond so quickly and so thoroughly!
Hi @benwoony, glad it worked out!
You raise a good point. The reading bar looks at the scrolling of the page, but does not actually account for (re)moving of elements above the article. I have put that on my todo list to look into, it think it would be a nice improvement, thank you for suggesting it.
If you have the time and you are satisfied, would you be so kind as to leave me a 5 star rating? It helps other people find and use my plugin 🙂
I will close this now as it is solved, don’t hesitate to contact me again in case of troubles!
Kind regards,
Joeri