Add Links to the Top Menu

Course-in-a-Box automatically fills the top navigation bar with a link to the course’s homepage and every module that is added to the _data/course.yml file. If you want to further customize the top nav with links to external websites (like a forum or your org’s website), you can do that by editing some HTML.

Head to _includes/navigation.html:

https://github.com/your-github-username/course-in-a-box/blob/gh-pages/_includes/navigation.html

Near the bottom of the code, you’ll see text that looks like this:

<!--
      <li class="nav-item py-2">
        <a class="nav-link" href="https://www.p2pu.org/en/" target="_blank">Example Link</a>
      </li>
-->

This code is “commented out”—in HTML, you can add <!-- and --> around a block of code to instruct the computer to ignore it. (This function is typically used for leaving messages about what specific code is used for—you can see that at the top of this file where it says <!-- Navigation -->) In this case, we’ve pre-built a space for you to add a link to the top menu and ignored it by default. You’ll only need to delete the <!-- and --> and update the link information to your own information.

By default, the nav bar should look like this:

Once you delete the <!-- and --> from the code above and commit your changes, it should look like:

To customize the link and title, you’ll replace these parts of the code:

<a class="nav-link" href="https://www.p2pu.org/en/" target="_blank">Example Link</a>

• https://www.p2pu.org/en/ – Delete this, then paste your web link here.
• Example Link - Change this text to be the name of your link.

Commit your changes and your new link should appear at the end shortly!