Integrity Submenu

Support
#1

Hi there

If I click a main menu in Integrity, the active menu changes its color to light grey and there is a red line above the menu text, so it shows the user, which menu is active. However, when I add some submenu to the main menu, this highlited colors are not shown in the main menu, so the user don’t see very easy, in which main-menu this submenu page is integrated, because there is no main menu shown as active.

Is there a possibility to show which main menu is active, when a corresponding submenu-content is open?

Thank you very much for your help.

#2

Hi Felix,

Please try this code in X > Theme Options > CSS:

.x-navbar .x-nav-wrap .x-nav > li.current-menu-parent > a {
    box-shadow: inset 0 4px 0 0 #ff2a13;
}

Here are some related links for further reading:

Hope this helps.

#3

Hi Jade

Absolutely great, thanks a million. Now the red line marks, which menu is active. What can I do, that the text of the main menu also changes its color to the active state?

Thank you very much.

#4

Hello Felix,

You just need to add the CSS color attribute to the code I have previously provided like this:


.x-navbar .x-nav-wrap .x-nav > li.current-menu-parent > a {
    box-shadow: inset 0 4px 0 0 #ff2a13;
    color: #ff0000;
}

Hope this helps.

#5

Hi Jade

This works perfect! Thank you very much for your great help.

Is there any chance to achieve the same result also for hidden pages, which are not in a submenu but are related to a main menu? As example, I have some hidden pages with each one video, which are reachable from a mainmenu overview page. When a video page is open, the related mainmenu should be highlighted.

Is this possible?

Thank you very much for your help.

#6

Hi,

Please update the given code to this:

.x-navbar .x-nav-wrap .x-nav > li.current-menu-parent > a,
.x-navbar .x-nav-wrap .x-nav > li.current-page-ancestor > a {
    box-shadow: inset 0 4px 0 0 #ff2a13;
    color: #ff0000;
}

If that did not work, please provide us the page URL.

Thanks,

#7

Hi friech

Thank you very much for your update. Unfortunately this did not work. Maybe I didn’t explain the problem very well. I think the problem would be solved, if there is a possibility to attach the hidden pages to the menu as submenus, but hide the display of the submenu for this hidden pages. Is this possible in the WP menu?

Thank you very much!

#8

Hi There,

To make the previous CSS work, you have to change the page parent of all video pages to Impressions page:

Hope it helps :slight_smile:

#9

Hi thai

Thank you very much for this important advice. This is exactly the right solution.

The red line appears above the menu text “IMPRESSIONS” but the text itself doesn’t change its color to light grey. What could be the problem?

Thanks again!

#10

Hi Felix,

I checked and it turns to light grey, the parent and the active sub-menu item. Would you mind providing a screenshot?

Thanks!

#11

Hi Rad

Thank you very much for your reply. If the page is a submenu-page, the parent and the active sub-menu turns to light grey, but the video pages are not in the menu, so therefor with the provided code, only the red line above the menu appears, but the text itself is not affected (see screenshot).

Thanks again.

#12

Screenshot_Menu.jpg

#13

Hello Felix,

To resolve your issue, please find this custom css block:

Update it using this code instead:

.x-navbar .x-nav-wrap .x-nav > li.current-menu-parent > a,
.x-navbar .x-nav-wrap .x-nav > li.current-page-ancestor > a {
    box-shadow: inset 0 4px 0 0 #ff2a13;
    color: #b7b7b7;
}

We would loved to know if this has work for you. Thank you.

#14

Hi RueNel

Thank you very much for your reply. No, I already had change the color to ##b7b7b7. With the submenu it seems to work but not with the video pages, which are connected to the parent page “IMPRESSIONS”. The box-shadow code affects the menu already but the code for the text color does not.

Thanks again.

#15

Hey There,

Your color code is incorrect. Instead of ##b7b7b7 it should be #b7b7b7.

So the correct CSS should be:

.x-navbar .x-nav-wrap .x-nav > li.current-menu-parent > a, 
.x-navbar .x-nav-wrap .x-nav > li.current-page-ancestor > a {
    box-shadow: inset 0 4px 0 0 #ff2a13;
    color: #b7b7b7;
}

Regards!

#16

Hi Thai

Thank you very much for your great help! I didn’t see the mistake. Now it’s perfectly working!

Thanks again and sorry for my mistake.

#17

You’re most welcome!

#18

Hi there

What do I have to change in the code that it works also in your Renew Template?

With this code the line is above the menu but in Renew the active Menu has a underline:

.x-navbar .x-nav-wrap .x-nav > li.current-menu-parent > a,
.x-navbar .x-nav-wrap .x-nav > li.current-page-ancestor > a {
box-shadow: inset 0 4px 0 0 #ff2a13;
color: #b7b7b7;
}

Thank you very much for your help!

#19

Hi There,

To make the line appear at the bottom, please update the custom CSS to this:

.x-navbar .x-nav-wrap .x-nav > li.current-menu-parent > a, 
.x-navbar .x-nav-wrap .x-nav > li.current-page-ancestor > a {
    box-shadow: inset 0 -4px 0 0 #ff2a13;
    color: #b7b7b7;
}

Hope it helps :slight_smile:

#20

Hi thai

Thank you very much for your help. How can I adjust the distance between the letters and the line? in Renew the line ist nearer to the menu letters and has only the width of the word (see attachment).

Thanks again for your help!