CSS – Sidebar Styling Adjustments

Hi Mat,

I came across to a couple of CSS styling issues I’m wondering you could help me out with.

1.

Firstly in the widget settings itself, there is a colour and font setting for “Highest Level Parent” and also “Current Item”

Currently, my Highest Level Parent is set to blue background and white text and it works on all child pages.

The problem is when the the Highest Level Parent itself is selected, so you are viewing the page of the Highest Level Parent itself.

In this case, the styling changes to the “Current Item” colours, which in my case is set to blue text on grey background.

How do I tell the Highest Level Parent to keep its style even if it’s selected as Current Item?

2.

Also, I’m trying to make the entire menu container rounded.

So ideally, I would like to have a round border of 10px going around the edges of the entire container.

I can’t seem to be able to find a selector, that would do just this.

Here is the menu that I currently have: https://ibb.co/vvQmDjM

And here is my current CSS:

section#advanced_sidebar_menu-2 {
-webkit-box-shadow: 1px 1px 10px 2px rgba(89,89,89,0.2);
-moz-box-shadow: 1px 1px 10px 2px rgba(89,89,89,0.2);
box-shadow: 1px 1px 10px 2px rgba(89,89,89,0.2);
}

section#advanced_sidebar_menu-2 ul.child-sidebar-menu li {
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid rgba(89,89,89,0.1);
}

section#advanced_sidebar_menu-2 ul.child-sidebar-menu li a {
padding-top: 10px !important;
padding-bottom: 10px !important;
}

section#advanced_sidebar_menu-2 #advanced_sidebar_menu-2-wrap ul.parent-sidebar-menu li.current_page_parent a {
padding: 20px !important;
}

section#advanced_sidebar_menu-2 #advanced_sidebar_menu-2-wrap ul.parent-sidebar-menu li.current_page_item a {
padding: 20px !important;
}

section#advanced_sidebar_menu-2 #advanced_sidebar_menu-2-wrap .dashicons {
top: 17px !important;
right: 25px !important;
background-color: #43b02a !important;
width: 30px !important;
height: 30px !important;
border-radius: 50px;
color: #ffffff !important;
vertical-align: middle !important;
}

section#advanced_sidebar_menu-2 #advanced_sidebar_menu-2-wrap .dashicons-plus:before {
vertical-align: middle !important;
line-height: 33px !important;
}

section#advanced_sidebar_menu-2 #advanced_sidebar_menu-2-wrap .dashicons-minus:before {
vertical-align: middle !important;
line-height: 33px !important;
}