Categories not displaying in responsive side menu

Question

I'm making a custom navbar, and I've moved the 'catalog.topnav' block into my custom navigation.

The problem is, is that some of the sections and categories on the responsive side menu are not showing up. This is not a problem when you don't move the block and leave it in its original position. Which leads me to believe that this is a javascript thing, that's grabbing the categories. However, I have no idea why that would be the case since there's got to be a better way of doing it.

The categories showing up in the main navigation:

The categories not showing up in the side navigation:

And here it is when not moved:

This only happens when I move the block. If I leave it in its original position it's perfectly fine.

Navbar XML

<referenceContainer name="header.container">
  <referenceContainer name="header.panel.wrapper" remove="true" />
  <referenceContainer name="header-wrapper" remove="true" />
  <container name="nav" as="nav" htmlClass="nav-main" htmlTag="div">
    <block class="Magento\Framework\View\Element\Template" name="nav.logo" template="Magento_Theme::home/nav/logo.phtml" />
    <container name="nav.links" htmlClass="nav-links" htmlTag="div">
      <block class="Magento\Framework\View\Element\Template" name="nav.side-menu" template="Magento_Theme::home/nav/side-menu.phtml" />
      <container name="nav.side-links" htmlClass="side-links" htmlTag="ul">
        <block class="Magento\Framework\View\Element\Template" name="nav.boat-toggle" template="Magento_Theme::home/nav/boat/boat.phtml" />
      </container>
      <container name="nav.boat-menu" as="nav.boat" htmlClass="nav-boat-hidden" htmlTag="div">
        <block class="Magento\Framework\View\Element\Template" name="nav.boat.login" template="Magento_Theme::home/nav/boat/login.phtml" />
        <block class="Magento\Framework\View\Element\Template" name="nav.boat.account-links" template="Magento_Theme::home/nav/boat/account-links.phtml" />
        <block class="Magento\Framework\View\Element\Template" name="nav.boat.languages" template="Magento_Theme::home/nav/boat/languages.phtml" />
      </container>
    </container>
  </container>
</referenceContainer>

<move element="catalog.topnav" destination="nav.links" after="-" />

Cheers guys! Any help is much appreciated!

Answer 1

The solution was to move the parent container instead of the block.

I looked at

vendor/magento/module-theme/view/frontend/layout/default.xml

And found its container which was

<referenceContainer name="page.top">

I then moved the container into my navigation and all was fine. I used the below code to do this.

<move element="page.top" destination="nav.links" after="-" />