# Main menu progress bar - styling for percentage

**URL:** <https://community.evolveauthoring.com/t/main-menu-progress-bar-styling-for-percentage/2991>\
**Category:** General Help\
**Tags:** accessibility, design\
**Created:** [June 17, 2024, 2:37pm UTC](https://community.evolveauthoring.com/t/main-menu-progress-bar-styling-for-percentage/2991 "2024-06-17T14:37:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![scamp](https://avatars.discourse-cdn.com/v4/letter/s/ac8455/32.png) [@scamp](https://community.evolveauthoring.com/u/scamp)\
**Post date:** [June 17, 2024, 2:37pm UTC](https://community.evolveauthoring.com/t/main-menu-progress-bar-styling-for-percentage/2991/1 "2024-06-17T14:37:30Z")

</div>

I’m pretty sure this is bugged, but does anyone know where/how to apply styles to the text on a menu item that says ‘XX%’ next to the progress bar (to indicate how complete that item is)? Nearest I can see in theme settings is under _Menu \> Item duration appearance_ but that is for the duration figure above.

If you look at the page HTML/CSS this XX% text seems to be set at 15px by rules for _.ev-page-item-progress-indicator-text_ and _.ev-progress-bar-text_. The page tries to set the font size using the _#ev-root_ ID (which I understand is the default font-size in _Course \> Body text appearance_) but it is overridden by the above two styles. However, they also both use the same styling rules in the CSS so not clear why both are applied - can anyone confirm how to set this font-size or if it is a bug?

This issue was highlighted as I am trying to increase it for accessibility, where, ideally, we want to aim for a 16px minimum. I know best practice there is up for debate, but I think it should be possible to change.

---

<div class="post-metadata">

**Author:** ![Matt\_Leathes](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/matt_leathes/32/586_2.png) [@Matt\_Leathes](https://community.evolveauthoring.com/u/Matt_Leathes)\
**Post date:** [June 20, 2024, 10:46am UTC](https://community.evolveauthoring.com/t/main-menu-progress-bar-styling-for-percentage/2991/2 "2024-06-20T10:46:10Z")

</div>

Hi @scamp I’m afraid you’re correct this is hard-coded, something which has been raised a couple of times before. I’ll see if we can get something on the roadmap to address that.

Interestingly if you select Box Menu as the course menu then in Settings \> Box Menu \> Item Layout you select **Use Vertical Item Layout** you do then have the option to change the font size. It uses the setting **Menu Item Title Text Styles** from Theme \> Menu Item Title Appearance. Appreciate that might not be ideal but it is an option…

---

<div class="post-metadata">

**Author:** ![scamp](https://avatars.discourse-cdn.com/v4/letter/s/ac8455/32.png) [@scamp](https://community.evolveauthoring.com/u/scamp)\
**Post date:** [June 20, 2024, 11:23am UTC](https://community.evolveauthoring.com/t/main-menu-progress-bar-styling-for-percentage/2991/3 "2024-06-20T11:23:24Z")

</div>

@Matt_Leathes Thanks for the reply and the suggestion 👍  
This one is with an external developer at the moment, so probably won’t pursue that option just now, but useful to know for the future, thanks 🙂