Change reading progress bar position in Thrive Theme Builder

[shaownhasane]

First, you can choose whether to add the progress bar below the title or at the top of the viewport (just above the title). If you choose the first option, you need to make sure the title is set in a prominent northeast phone number location where it will be displayed later.

Next, you can change the color of the progress bar. To do this, just click on the color picker.

At this point, you can select a theme color, which is the theme's default color scheme. Or you can click "Unlink from theme color" to choose a completely different color that's not part of the theme.

Change the color of the reading progress bar using Thrive Theme Builder
If you select the "Detach from theme color" option, you can also adjust the opacity of the color.

This way you can adjust the opacity of the progress bar relative to the background. In other words, the color of the progress bar should not be too bright to avoid distracting the user's reading attention.

When you are happy with the color, click Apply.

Change the opacity of the reading progress bar using Thrive Theme Builder
Finally, you can adjust the height of the progress bar.

The theme builder allows you to resize the bar up to 10 grains. This ensures that the progress bar doesn't appear too large. Therefore, it is recommended to choose a size between 5 and 10 so that the progress bar is clearly visible.

Use Thrive Theme Builder to change the height of the reading progress bar
When you're happy with how your bar looks, just click "Save Work" to keep your changes.