Highlight Parent Menu Item while Child Menu Item is active

  • Resolved rocos

    (@rocos)


    7 years, 6 months ago

    Hi there,

    I want to undertake a little modification of your great theme. Is is possible to highlight the parent menu item while the child menu item is active?

    I am not that familiar with coding, unfortunately, but I figured I have to make some changes to following code in style.css. But I dont know what kind of changes exactly. Original Code:

    .menu-primary-items .menu-item-has-children:hover > button, .menu-primary-items .menu-item-has-children.focused > button {
    -webkit-transform: translate(0, 2px);
            transform: translate(0, 2px);
  }
  .menu-primary-items .menu-item-has-children li {
    margin-right: 0;
  }
  .menu-primary-items .menu-item-has-children > a {
    position: relative;
    z-index: 9;
  }
  .menu-primary-items .menu-item-has-children > a:hover ~ ul, .menu-primary-items .menu-item-has-children > a:active ~ ul, .menu-primary-items .menu-item-has-children > a:focus ~ ul {
    visibility: visible;
    top: 100%;
    top: calc(100% + 1px);
    opacity: 1;
  }
  .menu-primary-items .menu-item-has-children > a:hover + button, .menu-primary-items .menu-item-has-children > a:active + button, .menu-primary-items .menu-item-has-children > a:focus + button {
    -webkit-transform: translate(0, 2px);
            transform: translate(0, 2px);
  }
  .menu-primary-items .menu-item-has-children > a:hover:after, .menu-primary-items .menu-item-has-children > a:active:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 24px;
  }
  .menu-primary-items .menu-item-has-children .menu-item-has-children:hover > button, .menu-primary-items .menu-item-has-children .menu-item-has-children.focused > button {
    -webkit-transform: translate(2px, 0);
            transform: translate(2px, 0);
  }
  .menu-primary-items .menu-item-has-children .menu-item-has-children > a:hover + button, .menu-primary-items .menu-item-has-children .menu-item-has-children > a:active + button, .menu-primary-items .menu-item-has-children .menu-item-has-children > a:focus + button {
    -webkit-transform: translate(2px, 0);
            transform: translate(2px, 0);
  }
  .menu-primary-items .menu-item-has-children .menu-item-has-children > a:hover ~ ul, .menu-primary-items .menu-item-has-children .menu-item-has-children > a:active ~ ul, .menu-primary-items .menu-item-has-children .menu-item-has-children > a:focus ~ ul {
    top: 0;
    left: 100%;
  }
  .menu-primary-items .menu-item-has-children .menu-item-has-children > a:hover:after, .menu-primary-items .menu-item-has-children .menu-item-has-children > a:active:after {
    top: 0;
    bottom: 0;
    left: 100%;
    width: 36px;
  }
  .menu-primary-items .menu-item-has-children .menu-item-has-children ul {
    left: 100%;
    left: calc(100% + 6px);
    top: 0;
  }
  .menu-primary-items .menu-item-has-children .menu-item-has-children ul:hover, .menu-primary-items .menu-item-has-children .menu-item-has-children ul.focused {
    top: 0;
    left: 100%;
  }

  .menu-primary .current-menu-item.menu-item-has-children > a + .toggle-dropdown {
    margin: 0 12px 0 8px;
  }

  .toggle-dropdown {
    margin: 0 12px 0 -8px;
  }

  .rtl .menu-primary-items ul .menu-item-has-children > button:after {
    content: '\f104';
  }
  .rtl .menu-primary-items ul .menu-item-has-children > a:hover + button, .rtl .menu-primary-items ul .menu-item-has-children > a:active + button, .rtl .menu-primary-items ul .menu-item-has-children > a:focus + button {
    -webkit-transform: translate(-2px, 0);
            transform: translate(-2px, 0);
  }

    Unfortunatel I cant give you a link to my page because it is used in a internal network…

    Thanks in advance.

    • This topic was modified 7 years, 6 months ago by rocos.
    • This topic was modified 7 years, 6 months ago by rocos.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for using Chosen!

    I recommend adding any CSS changes you make to Chosen to the “Additional CSS” section in the Customizer instead. When you update to a new version of Chosen, it will overwrite any changes made to the style.css file. Any CSS you copy into the Additional CSS section will stay saved between updates.

    To highlight a parent menu item when viewing a child menu page, you can add this CSS:

    .current-menu-ancestor a {
  color: blue;
}

    That makes the link blue for demonstration purposes, but you can update the menu item with any CSS properties you’d like.

    • This reply was modified 7 years, 6 months ago by Ben Sibley.
    Thread Starter rocos

    (@rocos)

    Thanks! That does it ??

    One more question: now every item in that active menu is colored, but I actually just want the ancestor to be colored. Is it possible to set the child-items to their normal styling?
    Thanks for the great work!

    Theme Author Ben Sibley

    (@bensibley)

    Oh yes, sorry about that ?? Give this CSS a shot:

    .current-menu-ancestor > a {
  color: blue;
}

    Now only the ancestor menu item will be affected.

    Thread Starter rocos

    (@rocos)

    Thank you ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Highlight Parent Menu Item while Child Menu Item is active’ is closed to new replies.