The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Menu with heredity problem

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #166639


    I’ve been struggling with this menu problem for days…

    My site:

    All menu and sub-menu items behave properly, i.e. stay orange when active.

    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {color: #ff6600;}

    Except for “SHOP”.

    Each of its sub-menu items leads to a page showing small photos. It’s when I click on a specific photo that “SHOP” stops being orange.

    If I select SHOP within this context and specify orange: a {color: #ff6600;}

    then all sub-menu items stay also orange even if not active.

    I tried all sorts of ways to fix this heredity problem. To no avail.

    Thank you for your help.


    Looks like a WP or JS problem to me but that’s outside my area of expertise.


    Thanks Paulie. But I doubt it’s WP or JS related.
    I still believe it’s only a question of using the proper selectors.
    “SHOP” (menu item) is the parent.
    Its sub-menu items are children.
    A particular image within a sub-menu item is a grand-children.

    All I want is to change the parent’s color without affecting its descendance.

    Basic CSS, no?


    You can’t affect a parent’s CSS when targeting a child/grandchild element in CSS (yet).

    So you click on an image which is a grandchild you can’t affect the Shop menu.

    Which is why I suspect it’s either a WP/JS issue.


    Thanks again Paulie. It might also be related to WooCommerce. This plugin is generating my Shop pages. I will try the WC forum.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.