Colorful Sidebar Menus

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: The colors are marked in red — feel free to change them to whatever HEX codes you want!

To see how this CSS code looks on an actual sidebar menu, visit the Development page.

Result

Related Articles