What is needed to keep parent menu element active while browsing subpages (Bartik Theme)

Question

Let's say we have 2 sections with pages like this structure:

/section1 *
/section1/page1-1 **
/section1/page1-1/page1-1-1 **
/section1/page1-1/page1-1-2 **
/section1/page1-2 **
/section1/page1-3 **

/section2 *
/section2/page2-1 **
/section2/page2-2 **

• = Link in main menu / ** = Link in custom menu (sidebar)

and so on.

The main menu of Bartik theme is not supporting sub-links, so I created custom menus, which are visible to each section (content type pages) in the sidebar.

Now I want to have the main navigation element of section1 root (/section1) be always having css-class "active" if any subpage of section1 is being browsed.

Any tips? I'm new to Drupal and don't want to mess up my installation.

Answer 1

There are differences in how to handle navigation levels between Drupal 7 and 8.

It's customary in both versions to create one menu even when you have "sub-items", you just indent the sub-items so they "belong" to another item as a "child-parent" relationship (use the Edit > Parent Link and Show row weights if you're not using drag and drop (javascript) in your interface).

Use Menu settings in Drupal 7

In Drupal 7 you have Menu settings where you can choose which Menu to use as Main links and which to use as Secondary links. In the case where you created one menu for both you select the same Menu for both options:

Use Block Menu levels in Drupal 8

In Drupal 8 there are no Menu settings for navigation levels. Instead, you configure the Blocks for your Menu with the Menu levels options:

Initial visibility level
Number of levels to display

Add the same Menu Block twice, but configure the levels differently.

For the first level of navigation those Block Menu level numbers should be:

1
1

and for the Secondary level that only shows up when the "parent" is active they should be:

2
2

---

You can read a bit more in this article: Primary and Secondary Navigation in Drupal 8