Question

I’m having a hard time getting the “active” class to stay across different pages. I have the navbar loading on each page via a layout, could this be the issue?

Answer 1

Yes, that is the issue.

Whenever you reload the page, whatever <li> element has class=active will be set to active again.

If you have /grails-app/views/layouts/main.gsp with the following:

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="/home">Home</a></li>
      <li><a href="/fred">Fred</a></li>
      <li><a href="/barney">Barney</a></li>
    </ul>
  </div>
</div>

And your GSPs for Fred and Barney use the main.gsp layout, when you click on them, you will load the code above and the link for “Home” will still be active.

Solutions are to write a Taglib for the Navbar control, or create separate layout pages.