Progress bar moving to top of sticky nav bar

  • Resolved uacl312

    (@uacl312)


    9 months, 2 weeks ago

    Hey,

    First of all, thank you for creating such a great plugin, I really appreciate it!

    I’m having an issue with the progress moving to the top of my sticky nav bar, when the bar technically starts to stick.

    It it in the correct place initially (as hopefully you can see on the example post provided), but then it jumps to the top of the header.

    The class name is .wprsticky-wrapper, then it changes to .wprsticky-wrapper is-wprsticky. I’ve tried adding both of those in the ‘stick the bar to this element’, and tried class IDs instead but it doesn’t seem to be working.

    My CSS is also a bit rough, so please explain it to me like I’m 5 if there’s a solution ??

    Many thanks ??

    • This topic was modified 9 months, 2 weeks ago by uacl312.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Joeri van Veen

    (@ruigehond)

    Hi @uacl312, thank you for using my plugin and contacting me about your issue!

    I see what you mean, this is not how I would like the bar to behave, so this will probably be a bugfix on my end. Working on it now. Will keep you posted here.

    Kind regards,
    Joeri

    Plugin Author Joeri van Veen

    (@ruigehond)

    Hello again, turns out I made a little mistake while debugging the bar on your site. It works when you attach it to #main-nav, because that element actually sticks. The element you are using now, keeps scrolling (even though I understand you would use it because of the suggestive class names) hence the bar also keeps scrolling (until it reaches the top).

    You can also switch off stick_relative in the reading bar settings as it has no effect I believe.

    However there remains a small css ‘problem’: the direct div descendants of your #main-nav get a large padding left and right, this makes the reading bar (that is targeted by that rule) not start at the left. You can fix this simply by adding the following css (untested, let me know if it does not work):
    #ruigehond006_wrap { padding-left:0; padding-right:0; }

    Hope this restores a happy experience with my little plugin.

    Love the site design btw, nice work!

    Kind regards,
    Joeri

    Thread Starter uacl312

    (@uacl312)

    Hey Joeri,

    Thanks for the help, that has worked like a charm. For some reason my theme was creating extra padding generally, so I’ve removed it and it works perfectly.

    I do notice the reading progress bar move to the centre of the nav bar for a split millisecond when the nav bar becomes sticky but that’s no big deal and it’s hardly noticeable.

    Many thanks for your help, and thanks for the feedback as well! ??

    Thread Starter uacl312

    (@uacl312)

    Actually ignore me, selecting the relevant positioning option has fixed that.

    Many thanks again!

    Plugin Author Joeri van Veen

    (@ruigehond)

    Hi @uacl312 , great that it worked out! Many thanx for your kind review!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Progress bar moving to top of sticky nav bar’ is closed to new replies.