--- title: "How to Add a Vertical Reading Progress Bar in WordPress?" url: https://nexterwp.com/docs/add-a-vertical-reading-progress-bar-in-wordpress/ date: 2024-12-12 modified: 2026-09-16 lang: en author: "Aditya Sharma" description: "A bar along the top of the page competes with everything else up there. A bar down the side does not. The Vertical type runs the same tracking as Horizontal,..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Vertical-Reading-Progress-Bar-in-WordPress_-1024x519.jpg word_count: 398 --- # How to Add a Vertical Reading Progress Bar in WordPress? ## Key Takeaways - Progress Tracker block works in Nexter Blocks free and Nexter Blocks Pro, and it is enabled under Nexter > Blocks in the WordPress dashboard. - Vertical reading progress bar fills from the bottom up as the visitor scrolls, and at 50% scrolled the bar’s height reads exactly 50%. - Vertical type only offers Left or Right position, stays fixed to the screen edge, and Pin Point works only with Apply to set to Entire Page. A bar along the top of the page competes with everything else up there. A bar down the side does not. The Vertical type runs the same tracking as Horizontal, just turned on its side — rising up the left or right edge of the screen instead of filling across the top. *For every Dynamic Device setting in one place, see the [Progress Tracker block guide](https://nexterwp.com/docs/add-a-reading-progress-bar-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-reading-scroll-progress-bar) ## Before You Start - **Edition:** Free — the Progress Tracker block works in Nexter Blocks (free) and Nexter Blocks Pro.- **Block to enable:** Progress Tracker, switched on under **Nexter > Blocks** in your WordPress dashboard.- **The bar is fixed to the screen, not the page.** It stays in place as you scroll, pinned to the edge you choose — that is what makes it a reading indicator rather than a static graphic. ## Steps - Add the **Progress Tracker** block anywhere on the page. - Choose a **Type**: Horizontal, Vertical or Circular. ![The Type options](https://nexterwp.com/wp-content/uploads/2026/09/pt-type.webp) - Set **Type** to Vertical. ![The Type options](https://nexterwp.com/wp-content/uploads/2026/09/pt-type.webp) - Set **Position** to Left or Right. ![The Position setting](https://nexterwp.com/wp-content/uploads/2026/09/pt-vertical.webp) > *Measured proportional to scroll, the same as Horizontal — at 50% scrolled, the bar's height read exactly 50%.* ## How It Behaves - **Height fills from the bottom up** as the visitor scrolls down the page.- **Position only offers Left or Right** for Vertical — there is no top/bottom choice here, that belongs to Horizontal.- Percentage and Apply to both work the same way as on Horizontal — see the [Percentage guide](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/) and [section guide](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/).- The bar is fixed to the screen, not the page. It stays in place as you scroll, pinned to the edge you choose — that is what makes it a reading indicator rather than a static graphic. ## Limitations - A tall, narrow bar can be easy to miss on a wide screen — consider adding Percentage text so it is not the only cue.- Pin Point still works on Vertical, but only with Apply to set to Entire Page — see the [Pin Point guide](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/).- A section-scoped bar needs a section taller than the screen — see the [section guide](https://nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/). ## Troubleshooting ### The bar is on the wrong side Set **Position** to Left or Right under the Type setting. ### The bar overlaps my sidebar or menu The bar is fixed to the edge of the whole screen. Give it a Margin under Advanced, or choose Horizontal instead if a side position conflicts with your layout. ## Related Docs - [Progress Tracker block guide](https://nexterwp.com/docs/add-a-reading-progress-bar-in-wordpress/)- [Circular progress bar](https://nexterwp.com/docs/add-a-circular-reading-progress-bar-in-wordpress/)- [Show a percentage](https://nexterwp.com/docs/show-percentage-in-reading-progress-bar-in-wordpress/)- [Add clickable steps](https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/) ## Frequently Asked Questions **Q: What do I need before adding a vertical reading progress bar in WordPress?** A: The Progress Tracker block is the only thing you need, and it works in Nexter Blocks free and Nexter Blocks Pro. In Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter, the block is enabled under Nexter > Blocks in your WordPress dashboard. The bar is fixed to the screen, not the page, so it behaves like a reading indicator while you scroll. **Q: How does a vertical reading progress bar behave while someone scrolls?** A: A vertical bar fills from the bottom up as the visitor scrolls down the page. It uses the same proportional tracking as Horizontal, so 50% scrolled means the bar height reads 50%. That makes it useful when you want a side indicator instead of a top bar competing with your header area. The position is pinned to the edge you choose and stays fixed on screen while scrolling. **Q: Should I use a vertical or horizontal reading progress bar?** A: Vertical works best when you want to keep the top of the page clear, because a bar along the top competes with everything else up there. Horizontal still makes sense if your layout already has room across the top, but Vertical only offers Left or Right placement. If your sidebar or menu sits on one edge, that layout detail matters more than style because the bar is fixed to the whole screen. **Q: Why is my vertical progress bar on the wrong side?** A: The Position setting controls this directly. Vertical only supports Left or Right, so there is no top or bottom choice for this type. If it lands on the wrong edge, switch Position under Type and it will move to the other side of the screen. That matters because the bar stays pinned to the screen edge while scrolling, so side choice affects every page view. **Q: Why does my vertical progress bar overlap my sidebar or menu?** A: The bar is fixed to the edge of the whole screen, not just your content area. That means it can collide with a sidebar or menu if your layout already uses that side. Adding a Margin under Advanced gives it breathing room. If that still conflicts with your design, Horizontal is the cleaner option for layouts where a side position gets crowded. **Q: What are the limitations of a vertical reading progress bar?** A: A tall, narrow vertical bar can be easy to miss on a wide screen, so Percentage text helps as an extra cue. Pin Point still works on Vertical, but only when Apply to is set to Entire Page. A section-scoped bar also needs a section taller than the screen. Those limits matter because they affect visibility and whether scroll tracking has enough space to feel meaningful.