menus - Highlighting Active Page in Navigation when Viewing Child Pages

admin管理员组

文章数量:1316351

I am trying to do something seemingly simple. I have invested a good amount of time researching and have not been able to resolve this one on my own. I would like to have the "Portfolio" page of my navigation remain active when viewing the child pages. My site is hc.design. Assistance with this will be tremendously appreciated!!

Thanks,

Holly

I am trying to do something seemingly simple. I have invested a good amount of time researching and have not been able to resolve this one on my own. I would like to have the "Portfolio" page of my navigation remain active when viewing the child pages. My site is hc.design. Assistance with this will be tremendously appreciated!!

Thanks,

Holly

• menus

Share Improve this question asked Aug 21, 2018 at 22:16 HollyHolly 111 silver badge11 bronze badge 1

• I am using Elementor.I reached out to Bill Erickson on this and he stated "It looks like your theme is a bit funky. Instead of using the standard WordPress menu classes to style active links, it's using its own classes. It's adding "elementor-item-active" to the active menu item link." He suggested I contact Elementor but I already had a while back and they informed me this issue was beyond their support and basically tried to get me to hire one of the partner coders just for this issue. If anyone knows a quick fix for this, it will be greatly appreciated! – Holly Commented Aug 21, 2018 at 23:43

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You've got a CSS problem, but you probably knew that already. There is a good post in this community "Highlight the parent menu-item when child menu item page is selected/loaded" that appears to offer a solution. But putting this into place in your site is easier said than done because of the rich variety (ahem) of CSS files being loaded on your site.

For example, the "blue" underline in the menu comes from "border-bottom-colour" in main-style.css; the "color" of the active menu text from post-33.css; the default (non-active) menu color (light grey) from global.css; menu padding from both frontend.min.css and post-33.css.

However, if you add the following CSS to, say, post-33.css, you should have success.

li.current-page-ancestor a {
    color: #6ec1e4 !important;
    border-bottom-color: #6ec1e4 !important;
    border-bottom-style: solid !important;
    border-bottom-width: thin;
}

If you would like to look at an alternative, or if your site become more complicated, then Bill Erickson posted a very useful, well explained article on his blog "Customize which menu item is marked active" in which he creates a filter to control the highlighted menu depending on which specific pages, tags and categories are being displayed.

One other thing: at the bottom of your About page, you have links for Elmhurst College and Virginia Tech. Both of these open in the same page as your site - that is, they take your visitors away from your site. You might find that it is better to add:

target="_blank"

to those links so that they each open in a new tab.

本文标签： menusHighlighting Active Page in Navigation when Viewing Child Pages