How to highlight a menu item when I'm on its child page?

Question

JavaScript

There is a navbar

<ul class="sidebar-nav sidebar-nav-icons">
  <li><a href='/'><i></i>bla bla</a></li>
  <li><a href="Shipments"><i></i>bla bla</a></li>
</ul>

The Shipments page has a link to the next page 'Shipments/Shipment' and when I'm on that page I want the Shipment in the main menu to remain highlighted.
My js which highlights only the main page and Shipments:

$(function () {
                    var url = window.location.href;
                    $(".sidebar-nav-icons a").each(function () {
                        if (url == (this.href)) {
                            $(this).closest("li").addClass("active");
                        }
                    });
                });

Answer 1

I think you are setting the class incorrectly.
https://jsfiddle.net/gorelov/f4co742r/
I forwarded it here. There, just cross the path and it will be ready.