Highlight current page in masthead (navigation bar)

[fortierq]

Is it possible to highlight/underline the active page in the masthead (navigation bar)?

[jedick]

Yes, it's possible!

In _includes/masthead.html set the class attribute for the active masthead__menu-item link.

{% if link.url == page.url %} class="active"{% endif %}

In _layouts/default.html, change an include_cached to include. The cached version of the masthead (as used in Minimal Mistakes) does not have the current page.url - for me it was always the URL of the first blog post.

{% include masthead.html %}

In assets/css/main.scss add CSS to style the active menu item.

.masthead__menu-item .active { font-weight: bold; }

Here is a commit to show these changes in context: jedick/jedick.github.io@f4e2a78

I hope this helps anybody else coming across this question as I did. I was having no luck with AI answers about styling links in nav__list, which is for the sidebar, not the main menu or masthead.