Contrib.social

Make Nav link active on speciic sub pages

Open on Drupal.org →
Created on 22 October 2023, about 1 year ago
Updated 25 October 2023, about 1 year ago

My Navbar purposely only has 3 main links with no sub-levels. Each link represents a category. Each category has many pages and content associated with it, but the ".navbar-nav .nav-link.active" css class only applies to the main page, as expected. I use this CSS to color the menu item:

.navbar-nav .nav-link.active {
color: #e6321e;
}

The navbar is displayed everywhere, so the ".navbar-nav" class is available on every page. Is there a way to apply the "nav-link.active" class to all other pages of a category to keep the color on the main link so it's clear this content is part of that category, or perhaps alternative ways to accomplishing the same objective?

I thought I would create a Views block with a contextual filter to make sure it only gets applied to specific paths, but I can't think of a way to manipulate the navbar class with it.

Thanks for your time and thoughts.

💬 Support request
Status

Active

Version

3.0

Component

User interface

Created by

🇺🇸United States guymandude

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @guymandude
  • Comment about 1 year ago →
    🇺🇸United States guymandude
  • Comment about 1 year ago →
    🇺🇸United States guymandude
  • Comment about 1 year ago →
    🇺🇸United States guymandude
  • Comment about 1 year ago →
    🇮🇳India vyasdhruv

    You can create a disabled sub-level menu for each page, under their respective category menu item.
    In Admin > Structure > Menus > Main Navigation / Your Custom Menu, the hierarchy should look something like this.

    Category A
    - Page 1 (disable menu item)
    - Page 2 (disable menu item)
    - Page 3 (disable menu item)
    Category B
    - Page 4 (disable menu item)
    - Page 5 (disable menu item)
    - Page 6 (disable menu item)
    Category C
    - Page 7 (disable menu item)
    - Page 8 (disable menu item)
    - Page 9 (disable menu item)

    I was able to achieve the same thing using this solution. Though I had only 6 pages for each category.

  • Comment about 1 year ago →
    🇺🇸United States guymandude

    Thanks you for your feedback. This approach works for landing pages with fixed paths, but for content which has a path/ it won't work. We need path/* menu links!

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024