Conditional CSS based on menu items and ancestors

  • Hi. I’m using Elementor Pro as a design tool in WordPress. I have a question regarding some custom CSS.

    Let’s get some info out of the way first. I have a page named Products. This page has two children (Category_1 and Category_2). These children have at least 20 children pages each that cover a lot of products.

    In my header, I have a navigation menu. What I want to do is that when one of the grandchildren to Products is open/active, its ancestors (Products and Category_1 or Category_2) should be highlighted as active in the menu.

    This is not a problem if I include the grandchild page in the navigation menu, but I don’t want to do that. I only want two generations listed in the menu: Products and a drop-down with Category_1 and Category_2.

    So, is it possible to write some CSS that is based on the following conditions?

    if page has a parent and that parent has a menu item, highlight menu item as active

    Couldn’t figure this one out on my own. I only got it to work where the ancestors were highlighted if the page active was also present in the menu.

    • This topic was modified 2 years, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 1 replies (of 1 total)
  • Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Moved to Fixing WordPress, this is not an Developing with WordPress topic.

    I’m using Elementor Pro

    For pro or commercial product support please contact the developer directly on their site. This includes any pre-sales topics as well.

    https://my.elementor.com/

    As the developer is aware, commercial products are not supported in these forums. I am sure they will have no problem supporting you there.

Viewing 1 replies (of 1 total)
  • The topic ‘Conditional CSS based on menu items and ancestors’ is closed to new replies.