I've seen some similar questions but the answer seem to revolve around a binary switch between mobile menu and regular menu where some JS is used to hide the regular menu (and show the mobile menu) as soon as any menu item goes into overflow.
What I'm looking to do is remove individual LI elements from the regular menu and move them into an overflow menu as needed,
I'll try to illustrate;
Initial menu state;
Home | About | Products | Services | Stuff | Contact
Home | About | Products | Services | Stuff | ...
Home | About | ...
So I spent way too much time on this :-)
It can be done but it's proving quite tricky.
One way is to loop through your menu on window resize and see if the li top position is greater than zero. If so, move it to the next menu.
My demo only moves them from the 1st to 2nd menu. You'll need to figure out a way to move them back.
Here is the code. Sorry I couldn't get a fully working version but a brother needs to get back to work!
PS. StackOverflow requires a code snippet when linking to jsfiddle. It's not relevant to this post so I'll just...
// include some code!