Moving the Contact link to the Hugo-Apéro header

By Jack Gregory in Hugo

February 3, 2024

TL;DR

In this blog, I summarize the steps necessary to move the Contact link on a Hugo-Apéro site from its default spot in the bottom-right footer menu (next to License) up into the top header menu, as the last item.

Introduction

Hugo-Apéro keeps its navigation in two separate lists in config.toml:

  • [[menu.header]], which renders as the top ribbon of links; and,
  • [[menu.footer]], which renders bottom-right alongside License and Contributors.

Contact ships as a footer entry by default.

Moving the Link

The stock footer entry looks like this:

[[menu.footer]]
name = "Contact"
title = "Contact form"
url = "/contact/"
weight = 2

To move it, that block is deleted from [[menu.footer]] and re-added under [[menu.header]], with its weight raised above every existing header item so it renders last (header items render in ascending weight order):

To do ✔️

  • Remove from footer: delete the [[menu.footer]] block for Contact. License and any other footer entries are untouched.
  • Add to header: create a matching [[menu.header]] block with the same name, title, and url.
  • Set the weight: give it a weight one higher than your current highest header-menu weight, so it sorts to the end of the ribbon.

Code 💻

[[menu.header]]
name = "Contact"
title = "Contact form"
url = "/contact/"
weight = 6

If your project uses split config files instead of a single config.toml, the same [[menu.header]] / [[menu.footer]] structure applies inside config/_default/menus.toml instead.

Usage

Once the entry is in [[menu.header]], no other configuration changes are needed. Contact renders as the last link in the top ribbon, and the footer keeps License (and Contributors, if present) as before.