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
Hi Joeri,
Thanks for such a quick response!
I got it working when I put the z-index at 10002, but when I tried to add the CSS you gave to my site, along with adjusting the z-index higher on the header than 2, it didn’t work.
Now, the 10002 works, but the CSS is so dominant on my header that it overlaps the dropdown menus from WordPress when I’m editing on the back end! I would prefer to have a fix that doesn’t interfere with my workflow.
The site is: https://thesupremeyoga.com/about
Thank you for your help.
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).
Thanks for the compliment on the site. Lots of work gone into it. Almost done!
Appreciate you taking the time to look into it, Joeri.
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
Joeri,
It worked!
You’re a legend! And all this support on a free plugin.
Thank you for the great work and service!
Wish you all the best,
Ryan
-
This reply was modified 11 months ago by
raltman.