# How to add a persistent navigation bar to a theme

**URL:** <https://discourse.gohugo.io/t/how-to-add-a-persistent-navigation-bar-to-a-theme/56720>\
**Category:** support\
**Tags:** off-topic\
**Created:** [February 14, 2026, 5:28am UTC](https://discourse.gohugo.io/t/how-to-add-a-persistent-navigation-bar-to-a-theme/56720 "2026-02-14T05:28:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![aarem](https://avatars.discourse-cdn.com/v4/letter/a/45deac/32.png) [@aarem](https://discourse.gohugo.io/u/aarem)\
**Post date:** [February 14, 2026, 5:28am UTC](https://discourse.gohugo.io/t/how-to-add-a-persistent-navigation-bar-to-a-theme/56720/1 "2026-02-14T05:28:23Z")

</div>

My question is possibly very basic, but I am trying to add a persistent navigation bar at the top, as in this site. So, just to explain this, in this site itself, at the top, we have a persistent bar in black (which I call persistent) because as I scroll down, that bar continues to stay at the top, allowing for easier navigation for the reader – s/he does not have to scroll back to the top in order to get to another link/section. How do I do this/where?

Many thanks in advance for answering this potentially basic question.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [February 14, 2026, 5:31am UTC](https://discourse.gohugo.io/t/how-to-add-a-persistent-navigation-bar-to-a-theme/56720/2 "2026-02-14T05:31:13Z")

</div>

Google “css sticky nav bar” or similar. That’s a CSS question, not a Hugo question.

---

<div class="post-metadata">

**Author:** ![markupandmatcha](https://avatars.discourse-cdn.com/v4/letter/m/ec9cab/32.png) [@markupandmatcha](https://discourse.gohugo.io/u/markupandmatcha)\
**Post date:** [February 15, 2026, 9:32pm UTC](https://discourse.gohugo.io/t/how-to-add-a-persistent-navigation-bar-to-a-theme/56720/3 "2026-02-15T21:32:44Z")

</div>

Just to expand on what was said above. In Hugo, your navigation lives in a partial (usually `header.html` or `nav.html`). The key is making sure it’s in your `baseof.html` layout _outside_ the main content block, so it persists across all pages:

```html
{{ partial "nav.html" . }}
<main>
  {{ block "main" . }}{{ end }}
</main>

```

For the sticky behaviour, add this CSS to your nav element:

```css
nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

```

`position: sticky` is well supported now and doesn’t need any JavaScript. It stays in the document flow until you scroll past it, then sticks to the top. Much cleaner than `position: fixed` which takes the element out of flow and can cause layout shifts.