Hmm, would you be willing to give us the whole page, or like the entire <body> section?
Also, would you be able to use a normal picture upload website like
https://imgbb.com/ to show us what you have and don't have? Our picture attachments aren't working right now.
For the resource 14 you mean it has child resources, so are they published, and do they have things like long title and other attributes which may be the ones pushed to the menu. Lacking this info I would think the menu would appear on the page but it would look weird and ugly, as it has no spacing or content. But, it might just blend in and be gone.
Else, we can let this go completely and go it with WayFinder, that might be better to chuck it and get Wayfinder working finally. I really think Wayfinder could be a big step in your ability and understanding, once it actually works and you can confirm it. It was a big early hurdle for me and I did not get over the hump at the time, ending up with hardcoded menus...sigh.
Ok let me break this down, it is a bit duplicative but not overly so. A lot of the need for multiple divs is that html has a default position it establishes, and that's often a bit ugly. Also, it might be better to sort of isolate each piece you have. So, it is a bit more complicated than it needs to be, but its not unreasonable at all.
<container> that's just the basic whole piece, inside we will have
ok and this will pull in widget area colors and so on, links can be a special style throughout the widget area. Notice widget area is still not the widget itself. So its not that duplicative, you might want a picture of yourself above the widget or an advert below.
This part could also contain the key positioning info, with everything below it following suit.
<div id="side-nav" class="" >
Ok this might be a bit wasteful but its the real sidebar area now. I guess those empty classes are...empty?
<aside class="widget widget_nav_menu" id="nav_menu-4">
Asides are kind of cool, the idea is you can define the whole website according to where your main info is, your additional info, a little niche somewhere to put info. Its like a <section> that's all I know.
And, finally we are getting to the good bits.
<h2> this class will make all titles the same style, like color and underline and so on. Previously we saw that Modx can do cool things like [[*longtitle]] and get the data right from the resource, but in this case the title text in there, its hard-coded.
<h2> is just your headlines, from the biggest <h1> down to little <h6>, and in your css you could define an <h7> and it would work perfectly. So this is for headings, subheadings and so on. Remember we want to work with classes in special areas, but usually there are basic rules under those classes.
<div class="menu-collecting-categories-container">
Ok this is where the action is, we have the tool and then links to your homepage and to your contact page under the tool output.
this is an "unordered list" which just sort of contains the output of the tool, in a line or space, above those two links I just mentioned.
are the lines in the list.
I believe you have a coding problem, its too weird and maybe not acceptable to have content (the tool) not in a <li> line. Try changing it to this, where I am putting the output into a line in the list. I added <li> and closed it after the tool is called.
<ul class="menu" id="menu-collecting-categories">
<li>
[[getMenus? &parent_id=`14`]]
</li>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/contact-us">Contact</a>
</li>
</ul>
Then that aside closes and the next one opens
<aside class="widget widget_nav_menu" id="nav_menu-6">
<h2 class="widget-title">M-2 More Modern Collections</h2>
<div class="menu-collecting-comments-recommendations-container">
<ul class="menu" id="menu-collecting-comments-recommendations">
[[getMenus? &parent_id=`19`]]
</ul>
</div>
</aside>
And thats the other tool, and its got the same problem, unless I am wrong about that.
And then everything closes and closes and so on