Apply css class to ul when li is active

  • Creatrix

    (@chrisl_57)


    10 years ago

    I thought this would be pretty straightforward but i can’t seem to find a working solution.

    I’m using four menus as widgets in a sidebar.

    When i click on a page in one of the four sections the li gets an ‘active’ class applied to it.

    I’m looking to target the ul that the li.active is sitting in.

    A) Can this be done with css?
    B) How can I add a similar class to the ul? Is there some code i can add in my themes functions?

    I’m using the Twitter Bootstrap theme if that helps.

    Example code: 

    <ul id="menu-welcome" class="menu">
<li id="menu-item-221" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-125 current_page_item menu-item-221 active">
<a href="#">Welcome</a>
</li>
<li id="menu-item-222" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-222">
<a href="#">The Case for Diversification</a>
</li>
<li id="menu-item-329" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-329"><a href="#">About this Website
</a>
</li>
</ul>
  • The topic ‘Apply css class to ul when li is active’ is closed to new replies.

Tags