Show active menu on single page

support
1

Hi! I have set up a pretty basic site, with three sections:
Projects
Blog
About

They are all assigned to the “main” menu, and the menu is defined in the frontmatter of each section page (_index.md) not the config file (boo!!!).

For the section pages, this works fine:

    <ul>
        {{ $currentPage := . }}        
        {{ range .Site.Menus.main }}
            <li><a {{if ($currentPage.IsMenuCurrent "main" .) }}class="active-menu"{{ end }} href="{{ .URL }}">{{ .Title }}</a></li>
        {{ end }}
    </ul>

However, if I then navigate into one of the single pages (for example, an individual blog post), the top nav loses its highlighting. Ideally, I want the active section to stay active. So if I am viewing a blog post, I want the Blog section link highlighted.

I tried HasMenuCurrent but that didn’t work. I also tried $currentPage.Parent.IsMenuCurrent, but it really didn’t like that.

Anyone know how to achieve this?

2

Hi there, this may be helpful: Another way to make a menu item active

3

A post was split to a new topic: How to append class=“active” to a page that’s using a single.html layout