Bradford Condon PhD

Bioinformatics, Web & Mobile Development

fixing tabs

As you can see below, the navigation tabs I’m using at the top of my page didn’t properly update depending on what page the user is at. While on the CV page, the CV tab should be selected, not home.

tabs not working!

So how do we fix it?

The header is defined in the /_includes folder in a hero-footer element.

<div class="hero-foot">
  <nav class="tabs is-boxed nav-menu has-shadow">
    <div class="nav-center">
        <ul>
          <li  class="is-active"><a href="/">Home</a></li>
          <li><a href="/about/">About</a></li>
          <li><a href="/cv.html">CV</a></li>
        </ul>
      </div>
    </nav>
  </div>

The list element class="is-active" is what tells the styling to make a particular tab active.

We can test if we are on a particular page using this snippet: ``. So, let’s replace <li class="is-active"> with <li >

<div class="hero-foot">
  <nav class="tabs is-boxed nav-menu has-shadow">
    <div class="nav-center">
        <ul>
          <li ><a href="/">Home</a></li>
          <li ><a href="/about/">About</a></li>
          <li ><a href="/cv.html">CV</a></li>
        </ul>
      </div>
    </nav>
  </div>

Reload the site and voila, our header now updates based on our page.

tabs working!
Liquid tags make it easy to conditionally change the class of our header tab element to active or not.

If you’d like to learn more we have been working with Liquid tags. There are a variety of handy tags to make your static page more dynamic.