Navigation excluding parents

[dhunink]

Hi,

one of the websites I’m working on has a structure where the main menu items have sub-items that are not always real post-children. On the landing page of the main menu-items, I want to show a navigation menu that holds only the pages that are sub-items in the menu.

For example:
Let’s say the menu as main items A, B and C.
Main menu item A has pages X and Y as sub-items. X and Y are not children of A, they are children of B.
Main menu item B has pages X and Z as sub-items. X is a child of B, Z is a child of C.
Main menu item C has pages Y and Z as sub-items. Y is a child of B, Z is a child of C.

When clicking on main menu item A, and not on a sub-item, I want to show a page which shows navigation to go to page X and Y. Thus, the two pages that in the menu are sub-items of A.

Is there a smart way to achieve this, perhaps using looping providers?

[ruenel]

Hello @dhunink,

Thanks for writing in!

As I understand, the menu structure would be like this:

Main Menu

    Menu A
        Menu X
        Menu Y

    Menu B
        Menu X
        Menu Z

    Menu C
        Menu Y
        Menu Z

Each of these menu items will have menu-id and when one of the menu item is click and loaded in the browser, the corresponding parent menu item will have a custom class current-menu-parent while the menu item will have current-menu-item class.

Now, clicking on the Menu Item A, will load page A. If you use looper, you can only get the child pages of A and not the exact menu items. I would recommend that you use ACF Repeater on the page A that notes which sub item pages to load. This is much more easier to set up. Loading them up will only use Looper Provider Dynamic Content.

Hope this makes sense.

[dhunink]

Hi @ruenel,
thanks for the swift reply. The menu structure is correct. But what I want to do, is when visiting page A, display links to page X and Y on the page. When visiting page B, that page should hold links to page X and Z etc.
Using ACF Repeater sounds interesting. I do have an ACF Pro license. But could you give me a hint or two on how to incorporate the ACF Repeater field in this case? Thanks!

[ruenel]

Hello @dhunink,

You will have to create an ACF Field groupfor the parent pages that allows you to define the links to the sub pages. The Repeater would be a good way to use since you can easily select the pages.

Hope this makes sense.

[dhunink]

Hi @ruenel,
doing it this way, means I still have to do work twice when something changes in the menu: first edit the menu, and secondly edit the ACF Repeater field for the parent page.
Since on this website there’s quite a frequente update with pages added and removed from the menu, I’m looking for a solution where only editing the menu, reflects in the list of links that will be shown on Page A, B and C.
Wouldn’t that be possible with a query-builder the queries on the menu, or some other clever solution?

Or maybe even simpeler: could be add a menu with all sub-items collapsed? Then through CSS we could simply hide all the top level menu-items that have not the .current_page_item class. Using CSS that actually works and makes the correct top lever items being hidden. But now we need to have the sub to be collapsed.

[ruenel]

Hello @dhunink,

You will have to create a connection between Page A and the pages X and Y. If there is none, you cannot display it the way you want it.

Yes, you may be correct with using the menu since you only want to edit only once. Styling would mean custom CSS which is beyond the scope of our support already.

Thanks.

[dhunink]

Hi @ruenel,

the connection is already there, though the menu
But you are right: the default WP_Query for posts or pages doesn’t deal with menu’s, and menu’s itself can’t be used inside Loopers in Pro, so it indeed would involve custom coding to fix this on a core level. And I totally understand why that’s something beyond support-scope.

However, I did managed to get pretty close using the default Pro’s inline-navigation element. Adding $el li(not:.current_page_item) will hide the parent elements. My only question now is how to open up the sub-menu by default. I’m missing a setting for that, but I’m sure it can be done, just as it can be done with accordions.

[ruenel]

Hello @dhunink,

I would suggest that you use the Navigation Collapsed element. Once you have it structured and in place on the page, add a JS code that will automatically opens the submenu. ChatGPT and/or DeepSeek should be able to provide you with the needed JS code.

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Thanks.

[dhunink]

Hi @ruenel,

is there no element that has the option to start the sub-items to be openend, like there is with the Accordion?
If not I do think this might be something to add to the roadmap. I see lots of sites where menu is not collapsed by default.

Your suggestion to aks ChatGPT was an interesting one. Never heard that from a support-agent before. But you’re absolutely right. ChatGPT seems to be able to handle even such a specific question.

I haven’t tested it yet, but because this is a public topic, I wanted to share this for anyone that might find this topic in the future:

ChatGPT Prompt: What Javascript can I use to have all Theme.co's Pro Theme Navigation Collapsed element sub-items opened?

Answer:
To ensure all sub-items of the Navigation Collapsed element in Theme.co’s Pro Theme are opened by default, you can use JavaScript to manipulate the element’s classes or attributes.

Here’s a JavaScript snippet that automatically expands all sub-items when the navigation loads:

document.addEventListener("DOMContentLoaded", function () {
    // Select all collapsed navigation items
    document.querySelectorAll('.x-collapsed-nav .x-collapsed-nav-list > li').forEach(function (item) {
        // Check if the item has sub-items
        let subMenu = item.querySelector('.x-collapsed-nav-list');
        if (subMenu) {
            // Add the 'toggled' class to keep them open
            item.classList.add('toggled');
            subMenu.style.display = 'block'; // Force it to be visible
        }
    });
});

[tristup]

Hi @dhunink,

The answer you got from ChatGPT is a custom coding solution that is beyond the scope of Theme Support, and that is why you didn’t get this kind of answer in the forum. If you still need any help with this, I would suggest you hire a developer who can assist you with the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[dhunink]

Hi @tristup,

I think you have misunderstood my post.
First of all, I did not added a support question. I posted my custom code, so that anyone that will google for a similar issue in the future, can grab the code I found. Simply wanted to contribute to the community.
Secondly I suggest a feature request: add an option the current navigation elements that enables submenu’s by default, like the option accordions have right now.

So I don’t need help, I just wanted to contribute to making Pro even better.

[ruenel]

Hi @dhunink,

Thanks for sharing. This wil be very much helpful to other users who might be looking to have the same set up like you have in your site.

Cheers.

[dhunink]

Hi @ruenel,

happy to do so! I’ll update the code when I implement on the live websites, just for future reference for other customers.

Did you catch my feature request as well?

@dhunink

Secondly I suggest a feature request: add an option the current navigation elements that enables submenu’s by default, like the option accordions have right now.

[marc_a]

Hey @dhunink,

Yes, we’ve added your feature request in the lists.

Thank you.