Progress Bar Overlaps Drop Down Menu on Mobile

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 1 year, 4 months ago by Joeri van Veen.

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, 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