Docs

[kreativloft3]

Hi,
I want to see all menu items of the current level from the current parent, but not from the other parents, nor ancestors.
I have tried to find another topic discribing the same problem and have found this one:

https://community.theme.co/forums/topic/keep-sub-menu-open-when-active/

with following conclusion:

ul.x-nav .current-menu-ancestor .sub-menu {
display: block !important;
}

But unfortunately this doesn’t work for me, since the default view displays the entire navigation just like a sitemap. (see attachment)
I have tried this, which works for a navigation with only 2 levels:
.sub-menu {
display:none;
}
.current-menu-item .sub-menu, .current-menu-parent .sub-menu, .current-menu-ancestor .sub-menu {
display: block !important;
}
But unfortunately it doesn’t work for menus with 3 levels…
It should look like the second attachment.
Can you help me?
Thank you very much for your help!
Best regards,
Olivier

[Rupok]

Hi Olivier,

Thanks for writing in! Kindly provide your URL and summarize what you actually want to achieve. Your post is a bit confusing for lot of codes. Kindly clarify the point.

Cheers!

[kreativloft3]

Hi,
URL: http://www.imhotec.ch/
Summary: I want to see all menu items of the current level from the current parent, but not from the other parents, nor ancestors.
Desired look: see attachement.

[Paul R]

Hi Olivier,

I can’t seem to find the menu that you referring to in your site.

Can you provide us the exact url of the page where we can see this menu.

Thanks

[kreativloft3]

Sorry for that, here it is: http://www.imhotec.ch/produktkategorie/tresor/moebeltresor/serie-eco/

[kreativloft3]

let me explain it in different words:
How it is now:

non-current-ancestor-menu-item 1
non-current-parent-menu-item 1.1
non-current-menu-item 1.1.1
non-current-menu-item 1.1.2
non-current-menu-item 1.1.3
non-current-parent-menu-item 1.2
non-current-menu-item 1.2.1
non-current-menu-item 1.2.2
non-current-menu-item 1.2.3
non-current-parent-menu-item 1.3
non-current-menu-item 1.3.1
non-current-menu-item 1.3.2
non-current-menu-item 1.3.3
current-ancestor-menu-item 2
non-current-parent-menu-item 2.1
non-current-menu-item 2.1.1
non-current-menu-item 2.1.2
non-current-menu-item 2.1.3
current-parent-menu-item 2.2
non-current-menu-item 2.2.1
current-menu-item 2.2.2 <—————–current-menu-item
non-current-menu-item 2.2.3
non-current-parent-menu-item 2.3
non-current-menu-item 2.3.1
non-current-menu-item 2.3.2
non-current-menu-item 2.3.3
non-current-ancestor-menu-item 3
non-current-parent-menu-item 3.1
non-current-menu-item 3.1.1
non-current-menu-item 3.1.2
non-current-menu-item 3.1.3
non-current-parent-menu-item 3.2
non-current-menu-item 3.2.1
non-current-menu-item 3.2.2
non-current-menu-item 3.2.3
non-current-parent-menu-item 3.3
non-current-menu-item 3.3.1
non-current-menu-item 3.3.2
non-current-menu-item 3.3.3

as you see, all sub-menus from the non-current menu-items are visible, whereas I only want to see the current-menu-item sub-menu. Just like this:

non-current-ancestor-menu-item 1
current-ancestor-menu-item 2
non-current-parent-menu-item 2.1
current-parent-menu-item 2.2
non-current-menu-item 2.2.1
current-menu-item 2.2.2 <—————–current-menu-item
non-current-menu-item 2.2.3
non-current-parent-menu-item 2.3
non-current-ancestor-menu-item 3

[Zeshan]

Hi there,

To achieve that, please replace following CSS code from your child theme’s style.css file:

.current-menu-item .sub-menu, .current-menu-parent .sub-menu, .current-menu-ancestor .sub-menu {
  display: block !important;
}

with this:

.current-menu-item > .sub-menu, 
.current-menu-parent > .sub-menu, 
.current-menu-ancestor > .sub-menu {
  display: block !important;
}

Hope this helps. 🙂

Thank you!

[kreativloft3]

This helped! 😀
Thank you very much!!!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts