Secondary navigation menu "more" link

Hi George,

The more button can be the same as the other visible menu items, but with some sub menu items.

I don't see why it's not possible :)

Let me know if I miss anything!

Hmmm. Ok, will try that, thanks Ying!

Yes let me know if it works :)

Yeah, it's not working as expected. Having the "more" item as a parent will affect the menu on mobile as I would need it to display all menus again. Probably need to use some javascript to cut the menu at a certain number of items (it would be great if it would be dynamic, though, for example as the browser width gets smaller, more items are added to the "more" dropdown). Could it potentially be done with CSS?

Hi George,

You can do this 2 ways.

1st is with some CSS + JS.

We basically have 2 event listeners. 1st would be an onload event listener that hides the excess menu items initially, 2nd would be a click event listener for the "more" button.

Here's how I think this can be done:

- Add a "More" menu item styled as a button. This will serve as a toggle that only appears on mobile (hidden on desktop/tablet).
- The script will have to get an array of all the menu items and then do an array map of these menu items.
- Set a variable for counting of currently shown item and a variable for maximum number of menu items. (we're setting the range here).
- Within the click eventlistener, do a for loop based on the currently shown menu items variable where:
if the current iteration of the menu item's index is more than the currently shown menu item count but is less than or equal to the maximum number of items, toggle class to show it.

or 2nd is with some AJAX.
Like this one - https://wordpress.org/plugins/ajax-load-more-anything/
or write your own AJAX, requesting for menu items. :)

Thanks for the great help, Elvin.

I think number 2 is kind of limited so I would probably need to write something custom. Just 2 questions.

1. If you see the example site, the read more button is only visible on the desktop. On mobile, it's the normal menu again but as a slider. I can make the menu as a slider on mobile through a JS library but the "read more" button would need to disappear. Will your logic still be the same?
2. For the mobile slider to work, I would need to modify the nav markup output so I can add extra divs. Is there a way to override that?

If you see the example site...

I didn't see this. Can you share it again? (If it's shared on private information text field, I don't see any attached on this thread)

But about #1: I think the logic will mostly stay intact except we need to modify the eventlistener to remove the "read more" button when the last menu item is visible.

That's actually why I suggested we need an array map of the menu items and variable for current menu items count and maximum number of menu items count.

This is so we can track the menu items and have some sort of basis to know how if the last menu item is displayed. (if current menu item count = max menu item count then that means the last menu item is displayed). This was for foresight incase this condition is needed.

For #2: It may be best to just make a new custom one. https://developer.wordpress.org/reference/functions/wp_get_nav_menu_items/