1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Reading progress bar

Discussion in 'Free Divi Community Forum' started by Antonia Dobreva, Apr 22, 2024.

  1. Antonia Dobreva

    Antonia Dobreva New Member

    Hello!

    I created reading progress bar with Divi. I want to use it on my blog posts, but when i put it in the header of the template (in theme builder), my default wordpress menu disappears. How can i use this progress bar without creating new menu with divi just for the blog posts?
    https://nikealtd.com/kolko-struva-obzavejdane-na-apartament/ this is one of the posts in the blog.

    Thank you in advance!
     

    Attached Files:

    #1 Antonia Dobreva, Apr 22, 2024
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  2. Divi Booster

    Divi Booster Divi Expert

    In the theme builder, create a new template, assigned to your blog posts. But instead of creating a header in the template, click "Add Custom Body". Then in that body layout, place the progress bar at the top, and a "Post Content" module below that. Note that the post content module loads and displays the content of your blog post.

    That will leave the default header intact, while placing your reading progress bar above the blog post content.

    You might need to play around with margins and padding a bit to get it looking the way you want, but that should, I think, more or less give you what you're after.
     
    #2 Divi Booster, Apr 22, 2024
    Antonia Dobreva likes this.
  3. Antonia Dobreva

    Antonia Dobreva New Member

    Hello!
    I did all of the things you said, but it seems i got confused with the position of the progress bar. I followed the instructions in this tutorial https://www.elegantthemes.com/blog/...bar-for-your-divi-blog-posts-without-a-plugin
    Now the problem is that the progress bar shows up in the divi builder, when i edit the page, but it's not showing in the website. Maybe something's wrong with the Z-index i entered. Can you help me with that?
    Thank you!
     

    Attached Files:

    #3 Antonia Dobreva, Apr 23, 2024
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  4. Divi Booster

    Divi Booster Divi Expert

    Hi Antonia, the progress bar (i.e. the divider module) doesn't seem to be getting added to the HTML source code of the page at all, so it won't be a z-index issue. I'd suggest going back into the body layout, check that the progress bar (divider and text module) is still there. Then save the layout. Now, check that the correct template is being applied to your blog posts (e.g. if you made a copy of the original one with the header, make sure it is deactivated). Save the changes on the main Divi Theme Builder page (if any). Finally clear any caches you are using (e.g. Litespeed). Hopefully that will resolve whatever is preventing the progress bar from being added to the final page.
     
    #4 Divi Booster, Apr 23, 2024
  5. Antonia Dobreva

    Antonia Dobreva New Member

    Hello! I did all of the things you said, but nothing seem to work. I did one test though - in the settings of the section containing the progress bar, in "position", i changed the location from top left square to center left square and the progress bar is showing on the final page. So, maybe the problem is in the position/location. In the tutorial the location is on the top left square, but this doesn't seem to be working in my case. If i leave it like it's shown on the tutorial, the progress bar stays hidden.
     

    Attached Files:

    #5 Antonia Dobreva, Apr 24, 2024
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  6. Antonia Dobreva

    Antonia Dobreva New Member

    New update: the progress bar is displayed and working in mobile view. The problem is now only on desktop :)
     
    #6 Antonia Dobreva, Apr 24, 2024
  7. Divi Booster

    Divi Booster Divi Expert

    Great! I can see the progress bar divider / text modules now. On desktop it's hidden underneath the fixed header. Assuming you want the progress bar to display immediately below the fixed header, you should be able to fix it by adding a top margin to the row containing the progress bar. Since the combined height of the main header and top header bar is 90px, if you add a 90px top margin to the row that should get it showing.

    You can set it at:

    Row Settings > Design > Spacing > Margin

    Set the top margin to 0px on mobile and 90px on desktop. On tablet widths the menu wraps onto a second line and makes the header taller, so setting the top margin to 124px on tablet might work best.
     
    #7 Divi Booster, Apr 24, 2024
    Antonia Dobreva likes this.
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  8. Antonia Dobreva

    Antonia Dobreva New Member

    It worked! Thank you very much for the support! Very useful and helpful! :) The progress bar works like a charm now.
     
    #8 Antonia Dobreva, Apr 24, 2024
  9. Divi Booster

    Divi Booster Divi Expert

    You're very welcome, Antonia. Glad I could help :)
     
    #9 Divi Booster, Apr 24, 2024
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Replace the default archive "Older Entries" with beautiful pagination:Learn More
(You must log in or sign up to post here.)