Highlight active link on top level menu of navbar

Help
1

I’m trying to figure out how to highlight the top-level menu on a navbar with dropdown menus. I’ve tried various css styles as well as scripts but still cannot get it to cooperate. I sure would appreciate some help. Here is my repo:

2

Not an exact solution, just sharing what I do to highlight “active” nav bar links:

Say we have 3 top level categories: 1, 2 and 3.

In the front matter of every page under 1, I add something like nav-group: 1

Then, in my nav bar include file, I wrap class="active" in an if liquid tag that basically says: if page.nav-group is “1”.

I do the same with 2 and 3, just using 2 and 3 respectively instead of 1.

Hope that makes sense!

3

Thank you Anna. I will give that a try.

4

I’m trying to follow the navigation examples on this page of the Jekyll docs, Scenario 3 Two-level navigation list. https://jekyllrb.com/tutorials/navigation/#scenario-3-two-level-navigation-list

I can get the navigation to work fine, but I cannot get the top-level menu item titles ( Group 1, Group 2 or Group 3) to get highlighted as “active” when you visit a page in each particular group.

I tried the recommendations from Anna-Filou where it recommended to create a nav group in the front-matter then reference that nav-group in a variable but it still doesn’t work.

Does anyone have an example of how this works in Jekyll? I’m working on a megamenu for a client and this seemingly simple thing is beating me up.

5

I had two issues. One was that I wanted to highlight the nav item on the current page and the second was that I wanted the top level nav in a certain order. Here’s the code that I used to do this. To control the order, I have a front matter element called nav-weight and then I sort on this. The reason I am explaining all this is that the code below accomplishes both.

{% assign navigation-pages = site.pages | sort: 'nav-weight' %}
{% for p in navigation-pages %}
  {% unless p.name == 'tags.html' or p.name == '404.html' %}
    {% if p.nav-weight %}
      <li class="nav__item">
        <a href="{{ p.url | prepend: site.baseurl }}" {% if p.url == page.url %} class="active"{% endif %} class="nav__link">{{ p.nav }}</a>
      </li>
    {% endif %}
  {% endunless %}
{% endfor %}

I hope that helps. I got much of this from this YouTube video.

P.S. Not sure how well this will work for a dropdown menu.

6

Have a look at this file. It uses the same approach of adding a class to navbar for active

It is actually based on following the Jekyll docs so it looks like if you go through the tutorial you’ll get this and other questions answered

Go back to step 1 to start over