LearnCenter Design Pages Navbar active

Summary

Trying to get the active state to work on Learncenter design pages navbar

Content

I am working on the switch to LearnCenter Design pages and have everything set up but as I test I am noticing one thing, the navbar state does not change based on the page as it should. Here is the code I am using:

<ul class="nav navbar-nav">
<li class="nav-item active"><a href="/page/7/!ldcsessionid!">Home</a></li>
<li class="nav-item"><a href="/page/2/!ldcsessionid!">My To-Dos</a></li>
<li class="nav-item"><a href="/page/4/!ldcsessionid!">Course Catalog</a></li>
<li class="nav-item"><a href="/page/3/!ldcsessionid!">Transcript</a></li>