Colorful Sidebar Menus
- Musa Jatkowski
- Sarah Nguyen (Deactivated)
Owned by Musa Jatkowski
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
}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 page.