How to have different selected state for menu items in sidebar-two widget?

  • am


    I am using the sidebar-two widget, which contains a list of items that the user can select. Each item takes the user to a different webpage, but the sidebar-two widget is always visible so that the user can select any other item and go to the corresponding webpage at any time.

    I would like the selected menu item in the sidebar-two widget to display differently from the un-selected items. Thus, when an item is not selected it should display as normal; but when selected, it should turn a different color, and, if possible, the background color behind that menu item should change as well. How would I accomplish this?


    Kenneth John Odle


    You need to learn about CSS pseudo classes, and then apply some custom CSS with that code to just that widget area.



    Thanks a lot for the link, Ken. So I noticed that the Graphene theme’s style.css file includes the following code:

    .sidebar ul li {
    border-bottom: 1px solid #f5f5f5;
    line-height: 15px;
    padding: 6px 0;

    By trial-and-error, I found that this code affects the individual list elements within the sidebar2 widget. So, based on my understanding of pseudo classes, I added the following code to my Graphene child-theme’s style.css file:

    .sidebar ul li:link {color:#d42222;}
    .sidebar ul li:visited {color:#4543e5;}
    .sidebar ul li:hover {color:#e5f213;}
    .sidebar ul li:active {color:#13f21a;}

    I figured that this would affect the display-color of the different states of the individual list elements within the sidebar2 widget. Unfortunately, it didn’t work. Could someone point me in the right direction? What did I do wrong here?

Viewing 3 posts - 1 through 3 (of 3 total)

  • You must be logged in to reply to this topic.