# Menu active class not Working on post

**URL:** <https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640>\
**Category:** Help\
**Created:** [November 4, 2021, 1:16pm UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640 "2021-11-04T13:16:59Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![afrique](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@afrique](https://talk.jekyllrb.com/u/afrique)\
**Post date:** [November 4, 2021, 1:16pm UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/1 "2021-11-04T13:16:59Z")

</div>

I am using [this code to create a menu](https://jekyllcodex.org/without-plugin/simple-menu) for my category pages. It works when I open a category. However, the active class is lost when I open a post in a category. I would like the active class to be highlighted when a post in a category is open. Is there a simple way to achieve that?

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 4, 2021, 6:31pm UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/2 "2021-11-04T18:31:30Z")

</div>

It sounds like you have each of your categories listed as pages in your navbar.

And when on the current category it is active.

Your question is how to highlight a category when on a post inside a category.

* * *

To do this you need to get the categories on the current page, in your layout

First I’d experiment on one post and then handle HTML later.

```auto
---
title: My title
category: abc
---

{{ post.categories }}

```

Or use page.categories

A post can be in more that one category if they are nested. So i will assume you won’t do that, to keep it simple.

Still, post.categories will be an array. So you’ll have to get the first category.

```auto
---
category: abc
---

{% assign cat = post.categories | first %}

```

And then make a mock navbar. I’m assuming you have page `abc.md` exist as your list of posts in the abc category.

Content for one post:

```auto
---
title: My title
category: abc
---

{% assign cat_page = post.categories | first | append: '.md' %}

{% for p in site.pages %}
- [{{ p.title }}]({{ p.url | relative_url }}) {% if p.name == cat_page %}Active{% endif %}
{% endfor %}

```

Then you can transfer that logic to your HTML. Like if you have nav.html that is used by page.html and post.html layouts.

---

<div class="post-metadata">

**Author:** ![afrique](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@afrique](https://talk.jekyllrb.com/u/afrique)\
**Post date:** [November 5, 2021, 12:44am UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/3 "2021-11-05T00:44:14Z")

</div>

Sorry. But I did not understand a thing. There is no simpler way for a beginner to follow? Anyways, I have the `page.category` assigned per post and the posts are also inside folders with the same name as categories in the` _posts` folder. I also have the category added in each post under the title.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 6, 2021, 6:05am UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/4 "2021-11-06T06:05:22Z")

</div>

Sorry I didn’t have a short answer because it wasn’t a simple solution.

I was suggesting get the first category of a page

And then compare that against the current page.

```auto
<nav>
  <a href="/my-category/" {% if page.url = '/my-category/' or page.categories[0] = 'my-category' %} class="active" {% endif %}>My category</a>
</nav>

```

* * *

I have an idea of another solution

Why don’t you check if the post path starts with / contains the category ?

Given a category page with url `/my-category/`, you can mark that category as active if the current post URL like `/my-category/2021/01/01-title.html` _starts with_ the category

```auto
<nav>
  <a href="/my-category/" {% if page.url = '/my-category/' or page.url contains '/my-category/' %} class="active" {% endif %}>My category</a>
</nav>

```

* * *

Both solutions assume you have the category page as:

`my-category.md`

```auto
---
title: My category 
permalink: /my-category/
---

```

To avoid having my-category.html

---

<div class="post-metadata">

**Author:** ![afrique](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@afrique](https://talk.jekyllrb.com/u/afrique)\
**Post date:** [November 6, 2021, 6:54pm UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/5 "2021-11-06T18:54:11Z")

</div>

I don’t use the category in the permalink. just the title. So I don’t think both solutions will work. Thanks anyway.

---

<div class="post-metadata">

**Author:** ![afrique](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@afrique](https://talk.jekyllrb.com/u/afrique)\
**Post date:** [November 6, 2021, 8:26pm UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/6 "2021-11-06T20:26:39Z")

</div>

~~My category pages are auto-generated by the Jekyll Paginate v2 plugin. Let me try and create the category.md file instead and get back. Both codes are throwing errors in build time though due to the = sign.~~

[Solved](https://stackoverflow.com/questions/35733044/how-to-add-active-class-to-navigation-link-if-you-are-on-a-single-post-page-i/35734234#35734234) using `page.path`

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 7, 2021, 7:04am UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/7 "2021-11-07T07:04:19Z")

</div>

I don’t see how that will work because then Journal is active for _any_ post not just a Journal category post with Journal in the URL

Also `page.type == 'post'` is more elegant than looking at `_posts` in the path

---

<div class="post-metadata">

**Author:** ![afrique](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@afrique](https://talk.jekyllrb.com/u/afrique)\
**Post date:** [November 7, 2021, 12:15pm UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/8 "2021-11-07T12:15:29Z")

</div>

I only borrowed this part `page.path contains "_posts/"` and implemented it inside the original code, and since my posts are grouped into folders which form the categories, then the link is `_posts/folder-name` for each menu link for each category. But I would be open for a better suggestion if you have one for this scenario since I am not sure `page.type` will work.

Edit: Seems this only works with hard coded menus and not those inside `_data` folder

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [November 7, 2021, 8:40pm UTC](https://talk.jekyllrb.com/t/menu-active-class-not-working-on-post/6640/9 "2021-11-07T20:40:54Z")

</div>

Oh yeah I assumed you just had frontmatter for category

But if you use a directory then yes you can check

```auto
page.path contains '_posts/my-category'

```

You can also use url. Which works both for posts and the category page itself.

```auto
page.url contains '/my-category/'

```