Problem styling current_page_item from wp_list_pages output

  • Resolved surfhost

    (@surfhost)


    15 years, 4 months ago

    I have a problem with styling my wp_list_pages generated list.

    The CSS for the current_page_item is:

    .menu .current_page_item a {
	font-weight:bold;
}

    (The list with pages and sub pages is inside a div with a class named menu.)

    This is the HTML output:

    <div id="sidebar">
 <ul id="sidebarwidgeted">
  <li>
   <div class="menu">
    <ul>
     <li class="page_item page-item-5 current_page_item"><a href="#">item 1</a>
      <ul>
       <li class="page_item page-item-7"><a href="#">item 1.1</a></li>
       <li class="page_item page-item-9"><a href="#">item 1.2</a></li>
      </ul>
     </li>
     <li class="page_item page-item-11"><a href="#">item 2</a></li>
    </ul>
   </div>
  </li>
 </ul>
</div>

    When you click a parent in the list, it gets the current_page_item class (good)
    But also all children inherit the bold setting. (not good)

    When you click a child in the list, only that child is bold. (good)

    I tried everything i can think of but i can’t get the child to stop inheriting the bold setting from his parent.
    When i style the page_item class with font-weight:normal it overrides the current_page_item so everything gets that property.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter surfhost

    (@surfhost)

    Solved it after way too many hours, with the following CSS:

    .menu .current_page_item a, .menu .current_page_item a:visited {
	font-weight:bold;
}

.menu .page_item ul li a, .menu .page_item ul li a:visited {
	font-weight:normal;
}

.menu .page_item .current_page_item a, .menu .page_item .current_page_item a:visited {
	font-weight:bold;
}

A current_page_item is bold and all other page_item(s) are normal.

    Thank you! Was wrestling this for hours!

    Adding, there are many unresolved posts on here with the same issue. Will post a link to this topic so others may benefit from your clean & elegant solution!

    Woot!

    If it helps, prefer also highlighting the parent when a child page is active.

    If anyone else does too, use this instead (or similar); 

    .menu .current_page_item a, .menu .current_page_item a:visited, .menu .current_page_parent a {
	font-weight:bold;
}

    Note the addition of .current_page_parent…

    Hi all,

    The parent menu highlight works a treat, thanks for that. But it doesn’t work when I’m on a 3rd level child page. Do you know how I can get the parent menu to highlight when I’m this far deep?

    For example, I would like the Explore menu to be highlighted when I’m on this page:

    https://www.grassrootsjourneys.com/explore/south-america/ecuador/

    Thankyou!

    I’m going to bump this up to the top as I’m still figuring it out – thanks!

    Hmm… add .current_page_ancestor, to the above CSS and see if that does it.

    Hi all,

    could you elude to what file the current_page_item style would typically be set? I don’t see it in my theme’s stylesheet. It’s been suggested that it’s in the wp_includes folder, but I can’t seem to find it. All I’m trying to do is adjust the padding to the current_page_item, as it’s being multiplied by the number of child pages given.

    help?

    This worked for me:

    .current_page_item a, .current_page_item a:visited {font-weight:bold}
    .page_item ul li a, .page_item ul li a:visited {font-weight:normal}
    .page_item .current_page_item a, .page_item .current_page_item a:visited {font-weight:bold}
    .current_page_item .page_item a, .current_page_item .page_item a:visited {font-weight:normal}

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Problem styling current_page_item from wp_list_pages output’ is closed to new replies.