# .svy-sidenav-item font-size over-ridden

**URL:** <https://forum.servoy.com/t/svy-sidenav-item-font-size-over-ridden/20375>\
**Category:** Questions\
**Created:** [November 23, 2020, 5:40am UTC](https://forum.servoy.com/t/svy-sidenav-item-font-size-over-ridden/20375 "2020-11-23T05:40:42Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![roddy](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@roddy](https://forum.servoy.com/u/roddy)\
**Post date:** [November 23, 2020, 5:40am UTC](https://forum.servoy.com/t/svy-sidenav-item-font-size-over-ridden/20375/1 "2020-11-23T05:40:42Z")

</div>

I am trying to set the font size and padding for the side menu items; I can see this font being used briefly before the whole screen is refreshed and the font size has been updated to the same size.

I have also tried using:

```auto
.svy-sidenav-item.sn-level-1 {
    font-size: 18px;
    color: #000;
}

```

as in the documentation example; the color is used but the font size is reset. I have removed ‘sn-large’ from the instantiation of the menu item class in the code and moved the import of the .less file to the bottom of the main project .less file but to no avail.

Is very likely a noob question but it would be great to know why this is happening.

---

<div class="post-metadata">

**Author:** ![roddy](https://avatars.discourse-cdn.com/v4/letter/r/a5b964/32.png) [@roddy](https://forum.servoy.com/u/roddy)\
**Post date:** [December 14, 2020, 12:45am UTC](https://forum.servoy.com/t/svy-sidenav-item-font-size-over-ridden/20375/2 "2020-12-14T00:45:27Z")

</div>

I fixed this issue with the following CSS:

```auto
.svy-sidenav-item.sn-level-1 {
    .svy-sidenav-item-text {
        font-size: 12px;
        font-weight: bold;
    }
}

.svy-sidenav-item.sn-level-2 {
    .svy-sidenav-item-text {
        font-size: 11px;
    }
}

```