Adding custom links in header

[BharatKalluri]

I see that the project already has a /about link, which is not linked anywhere directly in the page (or maybe I did not find it?) Is there an official way to have custom links in the header?

Awesome theme by the way, thank you :smile:

[Amoenus]

I have also noticed that. Personally would like it at least in the footer

[daniellivingston]

You'll have to override the header.html file. So, copy themes/novela/layouts/partials/header.html to layouts/partials/ (you will have to make this directory if it doesn't exist).

Then, modify this file to add additional links.

For instance, here is what the nav-controls div in my header currently looks like:

    <div class="nav-controls">

      <button id="aboutButton" class="icon-wrapper" type="button" onclick="location.href='/about'">
        {{ partial "icons/ui/about.html" . }}
      </button>

      <button id="blogButton" class="icon-wrapper" type="button" onclick="location.href='/post'">
        {{ partial "icons/ui/blog.html" . }}
      </button>

      <button id="githubButton" class="icon-wrapper" type="button" onclick="location.href='https://github.com/daniellivingston'">
        {{ partial "icons/ui/github-header.html" . }}
      </button>

      <button id="copyButton" class="icon-wrapper">
        {{ partial "icons/ui/link.html" . }}
        <div id="toolTip" class="tool-tip" >
            copied
        </div>
        <input id="copyText" style="opacity: 0;" type="text" class="tool-tip" />
      </button>

      <button id="themeColorButton" class="icon-wrapper"> 
        <div id="sunRays" class="sun-rays"></div>
        <div id="moonOrSun" class="moon-or-sun"></div>
        <div id="moonMask" class="moon-mask"></div>
      </button>
    </div>

Note that I also use custom icons (icons/ui/github-header.html, for instance, I had to create).