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.
| Code Block |
|---|
#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.
Related Articles
| Filter by label (Content by label) |
|---|
| showLabels | false |
|---|
| max | 5 |
|---|
| spaces | IKB |
|---|
| showSpace | false |
|---|
| sort | modified |
|---|
| reverse | true |
|---|
| type | page |
|---|
| cql | label in ( "web" , "development" , "menu" , "sidebar" , "wordpress" , "aurora" , "color" ) and type = "page" and space = "IKB" |
|---|
| labels | web development aurora wordpress color menu sidebar |
|---|
|