SOLVED: Nav menu: Main menu item not in active state when a sub sub menu is active

Bugs
1

Hello,
I have a main menu which has sub menu items and a sub sub menu items like ‘Food’–>‘Recipes’–>‘Soup’.
When I click on ‘Food’ and / or I click on ‘Recipes’ the main menu text ‘Food’ is displayed in green color – to show the active menu state. However, when I click on the sub sub menu ‘Soup’ the main menu text ‘Food’ is no longer displayed in the active state green but reverts back to the inactive state black.

Looking at the html code I can see that when a sub sub menu item is active the main menu gets no flag that indicates it is supposed to be active. This is the html code when the sub sub is active:

#brxe-fgvzmp .bricks-nav-menu > li > .brx-submenu-toggle > * {
  font-size: 1.1rem;
  color: var(--bricks-color-jtdoiy);
}

This is the same code that is used for an inactive menu item.

This is the code used for a sub menu item:

#brxe-fgvzmp .bricks-nav-menu > .current-menu-parent > .brx-submenu-toggle > * {
  color: var(--bricks-color-mgpprh);
}

Is that a bug?

2

Hi Lutz,
Thanks so much for your report!

I can reproduce the problem, but due to the complexity of the menu it is not easy to cover all conceivable scenarios. Can you perhaps briefly test whether the following custom CSS works in your menu or whether there are problems elsewhere in the menu?

Please reset the active styles in the menu settings first and then add this to style » custom css:

%root% .bricks-nav-menu .current-menu-ancestor > a,
%root% .bricks-nav-menu .current-menu-ancestor > .brx-submenu-toggle,
%root% .bricks-nav-menu .current-menu-item > .brx-submenu-toggle,
%root% .bricks-nav-menu .current-menu-item > a {
  color: var(--bricks-color-mgpprh);
}

Best regards,
timmse

3

@timmse thank you for the code. I did apply it but when I click on the sub sub menu item it only affects the color of the sub menu item . The font color and background color of the submenu active element changes not the main menu element.

Using my example from above ‘Food’–>‘Recipes’–>‘Soup’ — when I click on Soup the font color and background color of ‘Recipes’ changes. ‘Food’ is unaffected and still shows the inactive color.

4

All I hear is sub sub soup :rofl:

Would you be so kind as to send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase?

I think it’s much easier when I see the menu in front of me :slight_smile:

5

@timmse: Yes I taste the soup :wink:

Currently I only have the website on localhost but will upload it in a few days - then I can come back to you.

Here is a quick navigation out of the soup though:
Main Level
sub item = 1st sub level
sub sub item = 2nd sub level

:slight_smile:

6

@timmse: I have created a quick bricks sandbox site for the nav issue here:

https://try.bricksbuilder.io/td3bd664/

You click on the menu item ‘Food’ it turns green. Click on sub item ‘Recipe’ then ‘Food’ stays green. That is correct. Click on the sub sub item ‘Soup’ and ‘Food’ reverts to black which is wrong.

Login credentials send via messaging system.

7

Hey Lutz,
Thanks for the example. My custom CSS does not contain any explicit styles for the submenu. However, it should work with this:

%root% .bricks-nav-menu .current-menu-ancestor > a,
%root% .bricks-nav-menu .current-menu-ancestor > .brx-submenu-toggle,
%root% .bricks-nav-menu .current-menu-item > .brx-submenu-toggle,
%root% .bricks-nav-menu .current-menu-item > a {
  color: #4caf50;
}

%root% .bricks-nav-menu .sub-menu .current-menu-ancestor > a,
%root% .bricks-nav-menu .sub-menu .current-menu-ancestor > .brx-submenu-toggle,
%root% .bricks-nav-menu .sub-menu .current-menu-item > .brx-submenu-toggle,
%root% .bricks-nav-menu .sub-menu .current-menu-item > a {
  background-color: #4caf50;
  color: white;
}

Anyway, I have added the problem to the bug tracker. The submenu items should also be styled, no matter how deeply they are nested.

1 Like
8

Hey Stefan,

thank you very much. This workaround does the job.

The mobile menu has a similar issue. When a sub menu item is active the main item is not visibly active (I set the active background color to green but it stays black). When a sub sub is active neither the main menu item nor the sub menu item is visibly active.

9

Hi Lutz,
We’ve fixed this issue in Bricks 1.9.5, now available as a one-click update in your WordPress Dashboard.

Changelog: Bricks 1.9.5 Changelog – Bricks
Please let us know if you are still experiencing issues.