Highlighted Menu for Bear

I have updated the Bearming Theme add-on 'Highlight menu' to work regardless of the number of pages in your menu.

Your home page and blog page (if you're using /blog for it) works out of the box. For any additional pages, use the 'class_name' attribute in the header for that page. For example, if you have a contact page, you might want to add the class name "contact":

class_name: contact

Then, in the 'Nav' settings, give it a unique span class name like "nav-contact".

To give you a better idea, here's my current setup, using the class_name attribute "contact" and "search" for those pages:

Nav

<span class="nav-home">[Home](/)</span> <span class="nav-blog">[Blog](/blog/)</span> <span class="nav-contact">[Contact](/contact/)</span> <span class="nav-search">[Search](/search/)</span>

Themes

/* Highlight active menu item */
.home nav .nav-home a,
.blog nav .nav-blog a,
.contact nav .nav-contact a,
.search nav .nav-search a {
  background: var(--accent-color);
}

Hope you find it useful!