OnPoint Plugins

  • Plugins
    • Advanced Sidebar Menu
    • Go Live Update Urls
  • About
    • Services
    • Showcase
  • Blog
  • Contact
  • Support
  • Log In
← Back to support

CSS – Sidebar Styling Adjustments

Resolved

Requested: 4 years and 2 weeks ago

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;
}

Plugin: Advanced Sidebar Menu

  1. OnPoint Plugins

    4 years and 2 weeks ago

    Hi Jan,

    1. To prevent the current item’s styles from affecting the highest level parent, look for the option labeled “Apply current item styles to highest level parent page (when applicable)” and make sure it is unchecked.
    2. To add a rounded border, there is a wrap which may be targeted like so.

    Have a great day!

    Mat Lipe

New Response Cancel reply

You must be logged in to respond. Only PRO members are allowed to respond to support requests.

© 2023 · WordPress Development · Terms Of Service · Privacy Policy · Cookie Policy · Log in

  • Plugins
  • Blog
  • Contact