---
title: "Colorful Sidebar Menus"
canonical: "https://kb.uconn.edu/space/IKB/10785229114/Colorful%20Sidebar%20Menus"
format: markdown
---
If you add a sidebar with a menu widget, you may notice that the menu is displayed in a very simple manner. Below is code that you can add to your custom CSS to add some style to your sidebar menu.

```
#page-sidebar .widget.widget_nav_menu {
padding-left:0;
padding-right:0
}

#page-sidebar .widget ul {
margin:0
}

#page-sidebar .widget ul li {
padding:1em;
margin:0
}

#page-sidebar .widget ul li.current-menu-item,#page-sidebar .widget ul li.current-menu-item:hover,#page-sidebar .widget ul li.current-menu-item:active {
background:#0f4786
}

#page-sidebar .widget ul li:hover,#page-sidebar .widget ul li:active {
background:#dbe3ed
}

#page-sidebar .widget ul li.current-menu-item a,#page-sidebar .widget ul li.current-menu-item:hover a,#page-sidebar .widget ul li.current-menu-item:active a {
color:#fff
}
```

:warning: Note: Feel free to change the HEX codes to whatever you want.

### Result

To see how this CSS code looks on an actual sidebar menu, visit the [Development](http://aurora.uconn.edu/development/) page.