Target top level parent with CSS

Resolved

Requested: 3 years and 2 months ago

Hi there,

I am using the following css in my theme to target the top level parent annd apply a background and border.

Is it possible to target the css to change the colours if no parent is found ie we are at the top level?

#wp-widget-advanced_sidebar_menu-wrap .parent-sidebar-menu > li > a {
background-color: red !important;
border-bottom:1px solid rgba(0,158,222,.2);
}

Dion Bairle

3 years and 2 months ago

Further to this is it possible to apply hover to the top level item only?
OnPoint Plugins

3 years and 2 months ago

Good morning Dion,

You may target the top level parent when you are on the top level by adding the .current_page_item class to the CSS like so.

.parent-sidebar-menu > li.current_page_item > a { background-color: red !important; border-bottom:1px solid rgba(0,158,222,.2); }

You may add a hover effect to the top level parent by adding :hover to your li selector.

.parent-sidebar-menu > li:hover > a { background-color: yellow !important; }

If you would like to add a hover effect to the top level parent when you are on the top level by combining both techniques.

.parent-sidebar-menu > li.current_page_item:hover > a { background-color: yellow !important; }

Have a great rest of your weekend!

New Response Cancel reply

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