# How to do custom CSS on Navigation(Layout) Sidebar

**URL:** <https://community.glideapps.com/t/how-to-do-custom-css-on-navigation-layout-sidebar/85274>\
**Category:** Ask for Help\
**Created:** [November 7, 2025, 10:58am UTC](https://community.glideapps.com/t/how-to-do-custom-css-on-navigation-layout-sidebar/85274 "2025-11-07T10:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 10

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 13, 2025, 7:19am UTC](https://community.glideapps.com/t/how-to-do-custom-css-on-navigation-layout-sidebar/85274/10 "2025-11-13T07:19:30Z")

</div>

By the way — whether “Use Compiled CSS” is **enabled or not** , your CSS _can_ work in your app as long as it functions correctly in the builder.

When **“Use Compiled CSS”** is turned **on** , Glide automatically prefixes `#page-root` to your selectors. That’s the key difference — it limits your CSS so that it only targets elements under the `#page-root` hierarchy.

My suggestion: turn **“Use Compiled CSS”** off.  
See this thread for more context:

> [@CSS to change tab label dynamically?](https://community.glideapps.com/t/css-to-change-tab-label-dynamically/85082/11):
>
> I offer two options to solve your problem: Add #page-root in front of all your non-functioning CSS selectors if you want to use my suggestion. Remove #page-root from my code if you still want to use the button enabled option. However, I still recommend using the first option.

---

_[View the full topic](https://community.glideapps.com/t/how-to-do-custom-css-on-navigation-layout-sidebar/85274)._