Highlight portfolio menu option when on portfolio item (child)

[Priscilla]

Hello, I notice that when viewing a portfolio item page, the parent menu option in the main nav bar is not highlighted. How can I make the portfolio menu option (in my case called ‘Projects’) to be highlighted when on a “child” page?

[paul.r]

Hi,

To achieve that, you can add the code below in PRO > Launch > Theme Options > CSS

.single-x-portfolio .x-navbar .desktop .x-nav > .menu-item-452 > a {
    border-bottom: 8px solid #e1263a;
}

Where menu-item-452 is the class name of your projects menu item

Hope that helps

[Priscilla]

Holy smokes! Yes, that worked, thank you so much Paul!

[paul.r]

You’re welcome!

For future reference kindly refer to the link below.

Hope that helps

[Priscilla]

Thanks Paul. I am aware of the Inspect Element tool, but some elements have almost 10 classes, it gets confusing. For example, there are 8 classes just in the sub-menu item of the main menu alone:
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-17 current_page_item menu-item-33", not to mention the high-level (parent, grand-parent, etc.) classes: menu-main-menu, x-nav-wrap desktop, x-btn-navbar collapsed, x-container max width, x-navbar-innter, x-navbar, x-navbar-wrap, x-topbar, masthead masthead-inline, etc. So the challenge is in knowing which are the right classes to list.

[lely]

Hi There,

In that case, we have to understand the structure of the page and the relationship between elements. This elements can be siblings or they can have parent child relationship. This relationship is important on settings the selector of the CSS. This is a very broad topic to discuss. This link might help: https://www.w3schools.com/css/css_combinators.asp

[Priscilla]

Thanks for the link Lely.

[nabeel]

Glad we could help.

Cheers!