How to style page parent menu

  • Dear Guys

    I use wp_nav_menu() to generate the ul pages lists and got difficulties finding how to style the page li that have child page under its.

    Here is sample brief HTML output.

    <ul><li class="page_item page-item-2"><a href="#">main 1</a></li>
<li class="page_item page-item-4"><ahref="#">main 2</a>
<ul class="children">
	<li class="page_item page-item-6"><a href="#">Sub 1</a></li>
	<li class="page_item page-item-9"><a href="#">Sub 2</a></li>
</ul>
</li>
</ul>

    Let’s say I want to style ‘main 2’ to display differently in order to tell visitors that ‘main 2’ have child pages.

    Are there any possibility to style CSS in reverse order? So I could style li that have ul class=’children’ underneath.

    It may be a good idea if I can put class ‘is_parent’ in li that have children. If you could direct me which function in WP does that, it would be appreciated. I tried using ‘walker’ object but I’m not quite understand it.

    Cheers

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

  • Have a look at this thread – the author of the last post seems to have a solution for this.

    Thread Starter Chanon Srithongsook

    (@ninenote)

    Hey thanks so much dkristine!
    That is exactly what I want.

    For those who may come across the same issue,
    I edited /wp-includes/classes.php

    On start_el function – under Walker_Page class (Around line 1183)
    Under the line that say
    $css_class = array('page_item', 'page-item-'.$page->ID);

    Add the following code

    global $wpdb;
$result = $wpdb->get_results('SELECT post_parent FROM '.$wpdb->posts.' WHERE post_status="publish" AND post_parent='.$page->ID .' LIMIT 1', ARRAY_A);
if($result[0]['post_parent']) $css_class[] = 'parent-level-'.$depth;

    This may not a good idea if you have a massive navigation as I use the single query to check each nav. However, it did job for mine.

    Cheers

    ninenote thanks for this solution!.

    I was hoping can you help me in a adding a class “dropdown” to all those list item has subpages below them

    eg.

    <ul>
<li class="page_item page-item-2"><a href="#">main 1</a></li>
<li class="dropdown page_item page-item-4"><ahref="#">main 2</a>
<ul class="children">
	<li class="page_item page-item-6"><a href="#">Sub 1</a></li>
	<li class="page_item page-item-9"><a href="#">Sub 2</a></li>
</ul>
</li>
</ul>

    please help

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to style page parent menu’ is closed to new replies.