This site's navbar
2026-01-29
Navbar that shows various sections of the website, such as blog and tutorials. The current "location" the user is in is Bold.
first: in the appropriate template ( currently templates/base.html to show it on EVERY page ) add a list of links, for example as such:
<body>
<header>
<nav>
<a href="/">Homepage</a>
<a href="/blog/">Blog</a>
<a href="/tutorials/">Tutorials</a>
</nav>
</header>
... rest of body ...
</body>we can then style it, such as:
- make links stay blue, not the "visited" purple
- add some seperation, maybe even a | between them (see site css)
to add some more ergonomics, we can also bold the currently visited "category". a style entry for active section, and the conditionals: (sorry for ugly formatting)
<nav>
<a href="/" class="{% if current_path == '/' %}active{% endif %}">Homepage</a>
<a href="/blog/" class="{% if current_path is starting_with('/blog/') %}active{% endif %}">Blog</a>
<a href="/tutorials/" class="{% if current_path is starting_with('/tutorials/') %}active{% endif %}">Tutorials</a>
</nav>the css for it:
nav a.active {
font-weight: bold;
}