CSS Question – Current Item

Hello poir,
You may target the current item with css by using the

current_page_item

class

for instance you could add this to your theme’s style.css file

.current_page_item a{
    font-weight: bold;
}

Hope this helps.

Cheers

I’m having trouble with this too.

I have a menu going down to 3 levels (parent -> child -> second child)

I want to apply specific styling (change background colour) to the active page so it’s clear where the user is on the side menu.

The website is at:
https://www.tkdemosite.net/tools-and-resources/compliance-resources/

you’ll need htaccess to get in and a username/password to see the pages. I can email or PM these if somebody thinks they can help.

I’ve tried the following but it also highlights all the child pages under the heading. Once at level 3 it just highlights the single item because there are no children after this.

.advanced-sidebar-menu .page_item a:link, .advanced-sidebar-menu .page_item a:visited {
	background: none;
}
.advanced-sidebar-menu .current_page_item a:link, .advanced-sidebar-menu .current_page_item a:visited {
	background: #d6dff1;
}

Always happens, just after I post I find a solution. The following worked for me:

.advanced-sidebar-menu .current_page_item a {
	background: #d6dff1;
}

.advanced-sidebar-menu .current_page_item a:visited, {
	background: #d6dff1;
}

.advanced-sidebar-menu .page_item ul li a, .advanced-sidebar-menu .page_item ul li a:visited {
	background: #ffffff;
}

.advanced-sidebar-menu .page_item ul li a:hover {
	background: #d6dff1;
}

.advanced-sidebar-menu .page_item .current_page_item a, .advanced-sidebar-menu .page_item .current_page_item a:visited, .advanced-sidebar-menu .page_item .current_page_item a:hover {
	background: #d6dff1;
}
.advanced-sidebar-menu .current_page_item .page_item a, .advanced-sidebar-menu .current_page_item .page_item a:visited {
	background: #ffffff;
}

.advanced-sidebar-menu .current_page_item .page_item a:hover {
	background: #d6dff1;
}