Active Link dosen't work

1

I want to show acive links in the navigation bar. I see the active link, but the pages don’t change. Here is a part from my footer. I don’t know why it doesn’t work. Has someone a solution without javascript?

<footer class="footer">
      <div class="container">
        <a class="brand" href="http://example.com" target="_blank">&copy Hello</a>
        <input class="menu-btn" type="checkbox" id="footer-menu-btn" />
        <label class="menu-icon" for="footer-menu-btn"><span class="navicon"></span></label> 
        <ul class="menu">
          <li><a href="/imprint">Imprint</a></li>
          <li><a href="/legal-notice">Legal notice</a></li>
          <li><a href="/security">Security</a></li>
        </ul>
      </div>
    </footer>

    <script src="{{ "js/jquery-3.3.1.min.js" | absURL }}"></script>
    <script src="{{ "js/active.js" | absURL }}"></script>
  </body>
</html>

Here is my javascript file:

$(document).ready(function () {
$(function () {
$(‘li a’).click(function (e) {
e.preventDefault();
$(‘a’).removeClass(‘active’);
$(this).addClass(‘active’);
});
});
});

2

The basic concept in the docs works fine for me.

The gist is: You set some css class to show the page is the active one, so it stands apart from the non-active ones.

4

Just make another set of menu entries for the footer in config.toml and do the same sort of thing in your footer partial.

[menu]
     [[menu.main]]
     iden...
...
     [[menu.footer]]
     iden...
...
6

The links for the footer don’t work. The links for the header work fine. Is it possible to check my header.html and footer.html for me?

<header class="header">
      <div class="container">
        <a class="brand" href="http://developer.example.com">Developer</a>
        <img class="logo" src="{{ "images/Logo-Standard.jpg" | absURL }}" alt="">
        <input class="menu-btn" type="checkbox" id="menu-btn" />
        <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> 
        <ul class="menu">
          {{ range .Site.Menus.main }}
            <li {{ if or ($.IsMenuCurrent "main" .) ($.HasMenuCurrent "main" .) }} class="active"{{ end }}>
              <a href="{{ .URL }}">{{ .Name }}</a>
            </li>
          {{ end }}
        </ul>
      </div>
    </header>

<footer class="footer">
      <div class="container">
        <a class="brand" href="http://example.com" target="_blank">&copy</a>
        <input class="menu-btn" type="checkbox" id="footer-menu-btn" />
        <label class="menu-icon" for="footer-menu-btn"><span class="navicon"></span></label> 
        <ul class="menu">
          {{ range .Site.Menus.footer }}
            <li {{ if or ($.IsMenuCurrent "footer" .) ($.HasMenuCurrent "footer" .) }} class="active"{{ end }}>
              <a href="{{ .URL }}">{{ .Name }}</a>
            </li>
          {{ end }}
        </ul>
      </div>
    </footer>
7

Got your DM but, let’s discuss here because then other people can benefit.

I cloned your repo on my system and am running it with hugo server. The footer links work for me. What do you mean by “don’t work”?

8

Ah, you want the active link to be highlighted, am I right?

9

Ok, looking at the css, the active class is there and looks like:

.active {
  background-color: rgba(0,0,0,0.24);
}

The only thing I notice that is different, is your three footer pages are just in the root of content, while the others are in subfolders. I use config.toml menu specifications only when I need a link other than the pages I have. Otherwise, I specify inside the markdown files, like:

---
title: "Imprint"
date: 2017-12-05T14:45:43+01:00
description: "Imprint"
categories: ["KWP-Klein Wertpapierhandel GmbH"]
tags: ["Imprint"]
author: ["Joerg Klein"]
toc: false
draft: false
menu:
  footer:
     name: Imprint
     url: /imprint/
     weight: 1
---

I tested this, and it works.

For instance, if you wanted to link to something outside your pages, you could specify that in config.toml, but as for the pages you have, I would say specifying inside the page’s frontmatter is the best way.

Say you had some other gov’t site you want to link in the footer. You could do it like this:

[menu]
    [[menu.footer]]
    identifier = "some-other-site"
    name       = "Another Site"
    url        = "http://www.anothersite.de"
    weight     = 999
10

I installed the menus as suggested by Rick and they work flawlessly. If I click on the link Handbook in the Navbar, /handbook/toc will appear. But if I call in the browser /handboook, then the index page appears. But when I /handbook calls, I want the content of Siete toc.md to be displayed. I renamed toc.md to index.md and _index.md. Unfortunately, the result is always a list page. Maybe I should create a folder /layout /handbook/ index.html? The content of index.html is that of single.html.