[Jen HParticipant]

I’m using Integrity stack and notice that when on a child page (sub-menu), the parent page does not maintain current-menu-item styling in the main menu navbar. Can you tell me how (or is it possible) to do this?

[ChristianModerator]

Hey Jen,

In the Customizer > Custom > CSS, please add the code below.

.current-menu-parent a.sf-with-ul {
  color: white !important;
  -webkit-box-shadow: 0 2px 0 0 #ffffff;
  box-shadow: 0 2px 0 0 #ffffff;
}

Hope that helps. 🙂

[Jen HParticipant]

k thanks – this did the trick for me (yours was missing inset)

.current-menu-parent a.sf-with-ul { 
-webkit-box-shadow: 0 4px 0 0 #F21E29 inset; 
box-shadow: 0 4px 0 0 #F21E29 inset; 
}

[SupportMember]

Hey Jen,

Glad that it works for you.

We appreciate that you replied with working code this really helps other users having same issue.

Thanks

[Ying-FuParticipant]

Is this also possible for the menu type color since I got rid of the little bar?

[AlexanderKeymaster]

Hi Ying-Fu,

Sure, just use color: #abc123; instead of the box shadow rules.

[Dani MParticipant]

This is exactly what i was looking for.

Only one issue though, i have some pages under more than one parent on the navigation bar. When i click one of these child pages both the menus are highlighted. Any way to only highlight the parent that was used to get to the page?

[RadModerator]

Hi Dani,

Given the code above, you can change it into :

.current-menu-parent > a.sf-with-ul { 
-webkit-box-shadow: 0 4px 0 0 #F21E29 inset; 
box-shadow: 0 4px 0 0 #F21E29 inset; 
}

Hope this helps.

[ovationParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

please try this :

li.current-page-ancestor a span {
color: red;
}

Hope it helps.

[ovationParticipant]

Perfect. I wanted to highlight the entire li element (not just the immediate area behind the text), so I just took out the span. This worked for me:

li.current-page-ancestor a {
color: red;
}

Thanks!!

[RadModerator]

Okay cool, good one 😉

[FreekRParticipant]

Hi! I’m trying to highlight the menu item of the parent page too.

Tried this code:

.current-menu-parent > a.sf-with-ul {
-webkit-box-shadow: 0 4px 0 0 #F21E29 inset;
box-shadow: 0 4px 0 0 #F21E29 inset;
}

But it doesn’t seem to be working… I’ll send the details in a private reply.

Thanks in advance! 🙂

[FreekRParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please try this code:

li.current-page-ancestor a span {
  color: red;
}

Hope it helps.

[Author]

Posts