WordPress Side Menu - only-child (add a class?) and Add Down Arrows to Parent It (1 post)

  1. Jessica
    Posted 1 year ago #

    I am working on a WordPress side menu.

    I am using the code that the WordPress codex gives here. http://codex.wordpress.org/Function_Reference/wp_list_pages

    I have edited the code to make the ‘title_li’ null.

    The code worked great until I opened internet explorer. After doing some research, I found out that the only-child element does not seem to work in IE.

    In all the other browsers I had been able to style the menu so that the children items were hidden until you clicked on the parent item. I had added an arrow “\25B6” that showed up only on the parent items. Until I went into IE, then the arrow item showed up on all the items.

    I have discovered that the a:only-child:before does not work in IE.

    What I would like to do and I would appreciate and help or direction because I am lost:

    On the parent items, when the child items are displayed, I would like to have a down arrow.

    In IE I would like to have it function like the other browsers. Perhaps there is a way to add a class to the only-child element? I have not been able to find one yet.

    I have been trying to find solutions, I have added different css options and for some reason they are simply not recognized so nothing changes. The code below is what I am using to make my menu work. So far it behaves the way I need it to except for the arrow issue in IE and for the down arrow that I can not seem to get working.

    I have created a GitHub Gist with the generated menu code. https://gist.github.com/queenofwordpress/10759234

    This is the code for the menu that I am using in my sidebar.php.

    $parent = 122;
    'child_of' => $parent
    $pages = get_pages($args);
    if ($pages) {
    $pageids = array();
    foreach ($pages as $page) {
    $pageids[]= $page->ID;
    'title_li' => '',
    'include' =>  $parent . ',' . implode(",", $pageids)

    This is the CSS code I am using that allows me to have the menu hide the child elements and add the arrow to the parent elements.

    #sidebar li{list-style:none; margin-left:0px; line-height:14px;}
     #sidebar ul li{list-style:none; margin-left:10px; line-height:14px;}
     #sidebar ul {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-size:12px;}
     #sidebar a:link, #sidebar a:visited{color:#333; text-decoration:none; padding:0px;}
     #sidebar a:hover{color:#b70101; border:none; padding:0px;}
     #sidebar .current_page_item a:link{/*font-weight:bold; font-size:14px; line-height:25px;*/}
     #sidebar .current_page_item .children a:link{/*font-weight:normal; font-size:12px; line-height:14px;*/}
     #sidebar ul ul,
     #sidebar .current_page_item ul ul,
     #sidebar .current_page_ancestor ul ul,
     #sidebar .current_page_ancestor .current_page_item ul ul,
     #sidebar .current_page_ancestor .current_page_ancestor ul ul {display: none;}
     #sidebar .current_page_item ul,
     #sidebar .current_page_ancestor ul,
     #sidebar .current_page_ancestor .current_page_item ul,
     #sidebar .current_page_ancestor .current_page_ancestor ul,
     #sidebar .current_page_ancestor .current_page_ancestor .current_page_item ul,
     #sidebar .current_page_ancestor .current_page_ancestor .current_page_ancestor ul   {display: block;}
     #sidebar li > a:before {color: #b70101; font-size:.750em; padding-right:5px; content: '\25B6';}
     #sidebar li > a:only-child:before {content: '';}

    Again, thank you for taking the time to read and hopefully help. I learn more every day and this is frustrating but I am so excited to learn how to solve this problem.

    Please let me know if you need more information.

    Thanks!! 8-)

Topic Closed

This topic has been closed to new replies.

About this Topic