# Set active class to nested items

**URL:** <https://discourse.gohugo.io/t/set-active-class-to-nested-items/4130>\
**Category:** tips & tricks\
**Created:** [September 20, 2016, 1:49pm UTC](https://discourse.gohugo.io/t/set-active-class-to-nested-items/4130 "2016-09-20T13:49:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![calvetto](https://avatars.discourse-cdn.com/v4/letter/c/c68b51/32.png) [@calvetto](https://discourse.gohugo.io/u/calvetto)\
**Post date:** [September 20, 2016, 1:49pm UTC](https://discourse.gohugo.io/t/set-active-class-to-nested-items/4130/1 "2016-09-20T13:49:57Z")

</div>

Hi, i just spend half of my day tring to add an active class to a nested element in the main menu, i dont know but probably i was doing something wrong but anyway thats my solutions:

So i have the following content:

```nohighlight
content > fr > news.mp
content > fr > home.md

```

and my config.toml:

```auto
SectionPagesMenu = "main"
languageCode = "fr"
[menu]
      [[menu.main]]
              name = "General information"
              identifier = "home"
              url = "/"
              weight = 0
             parent = 'fr'
      [[menu.main]]
              name = "News"
              identifier = "news"
              url = "/"
              weight = 0
             parent = 'fr'

```

and the menu template:

```auto
{{ $currentNode := . }}
          {{ range .Site.Menus.main }}
            {{ if .HasChildren }}
              {{ range .Children }}
                <li class="col-md-3 ">
                  <a class="col-md-12 text-center {{ if $.IsPage }}{{ if eq .Identifier $.Type }}active{{ end }}{{ end }}" href="{{.URL}}">
                      <span>{{ .Name }}</span>
                  </a>
                </li>
              {{ end }}
            {{end}}
          {{end}}

```

and Voila!