How to personalize sidebar menu appearance ?

Thanks for your help Rikard.
I added two sidebars :
– 001 SIDEBAR MENU
– 002 SIDEBAR MENU
It’s very convenient to select to show sidebar in the layout menu on each page but i don’t know where i can personnalize CSS for each sidebar ?

I suppose i could use mega menu monster plugin to do it in easy way but i would like avoid to use to much plugins if possible.

Best regards,
James

Hi Rikard,

I followed your advice and it works quite well thank you, but I cannot format the link of the current page appearing in the menu widget.

I started a topic about this :

Currently the “current page link” appear in black but i would like to change it as i wish (like background color, font size,…).
I know it’s a simple CSS to add but I don’t know to do it.

Can you help me with this?

Best regards,
James

Hi Mike,
Thank you.
Yes, I finally found the solution on my own ;-)

I post here my CSS.
I know this can be improved.
However it could be usefull for other users that read this post so i hope this could help.

Best regards
James

/* ———————————— */
/* ——- WIDGET MENU PERSONALIZE ——- */
/* ———————————— */

#top .widget ul {
font-size: large;
line-height: 121%;
}

/* —— personalize current page link —— */
/*—- adding icon for current page link —- */
#top .widget ul li.current_page_item {
background-image: url(“icon.png”);
background-position: left;
background-repeat: no-repeat;
padding-left: 14px;
font-weight: 900 !important;
}

/*—- adding specific background color for current page —- */
/*—- and adding little spacing between letters —- */
#top .widget ul li.current_page_item a {
background-color: #c7eafc;
padding: 0% 4% 0% 4%;
letter-spacing: 0.007em;
border-radius: 9px;
}

/* — HOVER – adding background color for current page — */
#top .widget ul li.current_page_item a:hover {
background-color: #c7eafc;
padding: 0% 4% 0% 4%;
letter-spacing: 0.007em;
border-radius: 9px;
}

/* —— HOVER – appearence for all links (but current page) —— */

#top .widget ul a:hover {
background-color: gold;
padding: 0% 4% 0% 4% !important;
letter-spacing: 0.007em;
border-radius: 9px;
}
#top .widget ul.children inherit a {
background-color: none;
padding: 0%;
border-radius: 9px;
}