Progress Bar Overlaps Drop Down Menu on Mobile

  • Resolved raltman

    (@raltman)


    3 years, 8 months ago

    Hello Joeri,

    First, I really like the implementation of this add-on, and I gave it a 5 star review. Thank you for providing it for free.

    I targeted my sticky header with its CSS class to get the bar to appear below it. It’s working almost perfectly, except on mobile the progress bar overlaps the drop down hamburger menu in the header. I set the Z-index on my header to 1 to try and get the header to appear above the progress bar, but it’s still not working.

    How do I get the progress bar to appear below the drop down menu on mobile?

    Thank you for your help!

    • This topic was modified 3 years, 8 months ago by raltman.
    • This topic was modified 3 years, 8 months ago by raltman.
    • This topic was modified 3 years, 8 months ago by raltman.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Joeri van Veen

    (@ruigehond)

    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

    Thread Starter raltman

    (@raltman)

    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.

    Plugin Author Joeri van Veen

    (@ruigehond)

    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).

    Thread Starter raltman

    (@raltman)

    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.

    Plugin Author Joeri van Veen

    (@ruigehond)

    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

    Thread Starter raltman

    (@raltman)

    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 3 years, 8 months ago by raltman.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Progress Bar Overlaps Drop Down Menu on Mobile’ is closed to new replies.