Support » Plugin: WP Reading Progress » Insert the progress bar in the bottom of sticky header

  • Resolved simonavshalom

    (@simonavshalom)


    Hi, I’m new to CSS can you explain step by step how could I insert the progress bar so it will be shown at the bottom of my sticky header…
    And I want also to show inside the bar the title of the post. like on this website.

    Thank you in advance.

    • This topic was modified 1 year, 4 months ago by Yui. Reason: There is special field for links

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

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

    (@ruigehond)

    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

    Thread Starter simonavshalom

    (@simonavshalom)

    Thank you. I tried what you suggested and the progress bar woth header class still shows the same way like I choose “top”. I need it on the bottom of my header. my website http://www.growmore.co.il

    Plugin Author Joeri van Veen

    (@ruigehond)

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

    Thread Starter simonavshalom

    (@simonavshalom)

    Plugin Author Joeri van Veen

    (@ruigehond)

    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!

    Plugin Author Joeri van Veen

    (@ruigehond)

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Insert the progress bar in the bottom of sticky header’ is closed to new replies.