Highlight main menu option when child page is active

Support
#1

Hello, I’m trying to make the main menu option underlined when on one of its child / subpages. One of X theme’s articles says to place the 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;
}

under Customizer > Custom > CSS, in the article: https://theme.co/apex/forums/topic/how-to-keep-current-menu-item-navbar-highlight-when-on-sub-menu-pages/

I’ve tried this, to no avail.

Question #1: What does the “sf” stand for in a.sf-with-ul?

Your other article says to add the following code:

.x-navbar .x-nav > .current-menu-parent > a {
-webkit-box-shadow: inset 0 4px 0 0 #938a79 inset !important;
box-shadow: inset 0 4px 0 0 #938a79 inset !important;
}

As well as changing:
.current-menu-parent to .current-menu-ancestor.

I am using a child theme but none of the solutions seem to work.

The URL of my website is:
http://terracana.priscillathen.com/our-services/commercial-applications/

You’ll notice that I disabled the top level URL for the ‘Our Services’ menu option with /#! .

Question #2: How can I make the main menu option (Our Services) remain highlighted (in my case with the red underline) when on any of the subpages?

Any pointers in the right direction would be greatly appreciated. Thanks. :slight_smile:

#2

Hi there,

Please try this code:

.current-menu-parent a {
    border-bottom: 8px solid #e1263a;
}

Hope this helps.

#3

Great to see how to target the current parent menu, thanks! :slight_smile: However, it only works for the first child page, but not the other 2 “grand-child” pages:

http://terracana.priscillathen.com/our-services/commercial-services/

http://terracana.priscillathen.com/our-services/load-testing/

Do you know how to get around this?

Also, the sub-menu options are now highlighted when on the direct child page, which is not the desired outcome:

How can I remove the highlighting of submenu options?

#4

Hi There,

Please update the CSS to this to remove highlighting on submenu options.:
.current-menu-parent> a { border-bottom: 8px solid #e1263a; }

Regarding the grandchild page, it should be set on the Appearance > Menu to work and not on pages. What I meant was, the hierarchy to follow is on Appearance > Menu and not the one on Pages.

Hope this helps.

#5

Thanks Lily. I was trying to avoid 3rd level sub-menu navigation from appearing for UX reasons, as it can be quite “finicky” for users to mouse over to 3rd level sub-menu options. Anyways, I’ve added them in as “grand-child” pages through the Wordpress Dashboard (Appearance / Menus) for now (for behind the scenes code structure purposes). I can come back to making it invisible after, as ideally, users should just be able to click on ONE sub-menu bar.

I didn’t realize it was just the “greater than” (direct child) symbol that was missing. I put it in and it worked partially, thanks for that!

The bottom border highlighting is no longer visible when on any other page (other than the ‘Our Services’ section) which is great:

but when on the ‘Our Services’ page, the red highlighting still appears:

Now I have 2 more questions:

#1) How can I get rid of the red border highlight that appears in the submenu?

#2) When on the 2nd and 3rd pages, the red highlighting under ‘Our Services’ is lost. Here’s an example page where you’ll see what I mean: http://terracana.priscillathen.com/our-services/commercial-services/

As usual, your expert advice would be much appreciated. :slight_smile:

#6

Hi,

For 1&2 You can add the code below in Custom CSS

.sub-menu .current-menu-parent > a {
    border-bottom:0 !important;
}

.x-navbar .desktop .x-nav > .current-menu-ancestor > a {
       border-bottom: 8px solid #e1263a;
}

Hope that helps

#7

Oh wow, you’re a genius! That worked, thank you very much, Paul!

#8

You are most welcome. Unfortunately we don’t offer online tutoring. However I can point you to excellent resources that you can refer to learn CSS and other web technologies:

Happy learning. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.