Joeri van Veen

Thank you so much for your five star rating!

Thank you for giving it a 5 star rating, appreciate it! May the plugin serve you well.

Hi @saptoafr26, since I do believe that your issue is solved with the latest release, I am going to go ahead and close this now. Please feel free to contact me if you have further questions or issues.
Kind regards,
Joeri

Hello @saptoafr26,

Thank you again for bringing this to my attention. I have just published a new version (1.3.7) of the Reading Progress Bar which should address this issue. If you use a screenreader yourself please let me know if the bar works correctly for you. The lighthouse report should be fixed now, let me know if it isn’t.
[edit]: I forgot to mention, you need to fill in the Aria-label yourself in the settings (Settings->WP Reading Progress).

Kind regards,
Joeri

• This reply was modified 3 years, 7 months ago by Joeri van Veen.

Hi, thank you for contacting me. You raise a good point, this is not something you can easily fix yourself. I will look into it the coming days and publish a new version then, with the appropriate attributes on the progressbar. Will keep you posted here.
Thanks again, also thank you for using my plugin ??
Kind regards,
Joeri

• This reply was modified 3 years, 7 months ago by Joeri van Veen.

Hi, yes I can see that you put a lot of effort into it. Proud to provide the reading bar on your website.
Regarding the positioning: the reading bar positions itself at the top on smaller screens when scrolling which puts it in a different z-index stack, which threw me off earlier today. I think this will solve all your problems (reading-bar wise):

.elementor-location-header {
  position: relative;
  z-index: 2;
}
#ruigehond006_wrap {
  z-index: 1;
}

Explanation: when at the top, the reading bar is the last element in the body, which puts it in the same stack as the elementor-location-header (and has nothing todo with the menu or anything), so it would always appear on top (this is also intentional by the way, to keep it visible ‘at all times’), which was not desireable in your case, because the menu is inside the header and just ‘blurted’ out on the page. When relatively stacking the header and the reading bar, the problem seems solved, though I did not test it with the admin bar for obvious reasons, I would think that is also better now.

Please let me know if it works out for you.

Kind regards,
Joeri

Nice website! I can confirm that it does not work with the z-index, could not figure out why though, will get back to you later today (my time).

Hi Raltman, thank you for your kind words. Out of the box the reading progress bar has an insanely high z-index of 10001 because some themes would totally overlap it otherwise. You can bring this down to suit your purposes like so:

#ruigehond006_wrap { z-index: 2; }

If this does not work for you, please share a link to the page / website that causes trouble here, so I can take a look.

Kind regards,
Joeri

• This reply was modified 3 years, 8 months ago by Joeri van Veen.

Hi @simonavshalom , I see the reading bar is still at the top on your website, I hope that is because you are busy with other things and have not tried my proposed solution yet. I will close this support thread for now because it looks bad on the plugin page. Please feel free to follow up here or start a new thread if my answer did not fix your issue! I’m always happy to help.

Hi, I think you can target the bar with this: [data-id="32aa78c"] (in the input field ‘attach bar to this element’).
And then switch on ‘relative positioning’ (the checkbox) to have the bar move with the mobile menu as well.
You’re left with a gap though, this looks like a bug on my part which I will look into. Meanwhile you can easily correct that with the following css:

#ruigehond006_inner { margin-top: 0 !important; }

I don’t know how stable the data-id is, maybe elementor has some functionality where you can put an id on an element? That might be more stable.
Hope this helps, let me know how it goes!

• This reply was modified 3 years, 10 months ago by Joeri van Veen.

Hi @simonavshalom that website is not accessible to me. Can you double check the url?

Hi @simonavshalom, that’s a nice feature, showing the title, never thought of that. This would require some custom javascript, or maybe I can build it in a future release, which would be more robust I guess. As it stands now, it is not easily done, sorry.
Regarding the stickyness: open your dev tools / inspector (F12 on windows, or right-click inspect) and locate the sticky header, once found, identify the unique identifier for that element, this can be an id (id=’blabla’) or a unique combination of classes (class=’header sticky-header the-coolest-header-ever’), than put that identifier into the WP reading progress bar settings page ‘Stick the bar to this element’ input, in css format, like so: #blabla, or .header .sticky-header .the-coolest-header-ever (id’s are preceded by #, classes by a dot). Alternatively: show me the page you are working on, so I can try to identify it for you.
Kind regards,
Joeri

• This reply was modified 3 years, 10 months ago by Joeri van Veen.

Hi Gil Conception Jr., for now I will mark this as resolved. Let me know if you have any other issue. When you’re happy with the plugin and you have the time please leave me a 5 star rating ??
Kind regards,
Joeri

Hi, I just updated WP reading progress to version 1.3.6, in this version I moved the css so it is output in one compressed string in the head, avoiding render blocking issues, and added the option to remove the css altogether if you wish to put the css somewhere else to further optimize your site. Default is false so when you upgrade nothing changes about the behaviour.
Please let me know if the render blocking issue has indeed gone with the new version.
Thanx for using my plugin!
Kind regards,
Joeri

Hi Gil Concepcion Jr. thank you for bringing this to my attention. I will look into this asap, probably next week. Other plugins of mine have the option to switch off the css, so you can handle it yourself (with a javascript / css optimizing plugin or in the theme), would that be a good solution for you?
Kind regards,
Joeri