Symbol visibility cascading UP (!?)

I have a two (and soon three) navigation menus to address limited real estate on mobile devices. Webflow Univ suggests adding a combo class to address visibility of elements on a page (hide or hidden) and change the setting to “display none” and that these cascade from the default display setting. I am attempting to set visibility on those so I only get the chosen menu for each device. The “hide” combo class strategy is not working as expected. Designer error I suppose. I don’t know if that is a consequence of the menus being a symbol or something else.
I have a “default” navbar for the site with animated drop down menus. These will not work on a small screen so I created a different header and introduced a footer menu with text links for mobile landscape. That is for mobile landscape.
The “default” menu is a symbol as is the mobile landscape menu / header div. I created the latter in the mobile landscape view in Webflow and created the symbol in that view as well (I think) The mobile landscape header div display in tablet and standard view (of course) so I set a hide combo class for those views. Their visibility “hidden” cascades down to mobile landscape however. Kind of expected. So I’m not at all clear how to set this up so I get the behavior I want where the default menu is hidden on mobile landscape (and that works now) but the mobile landscape header / div remains hidden on tablet and default view but IS visible but ONLY on mobile landscape view.
This is clearly seen toggling the preview screen and stretching the width of the viewport. Changing the combo class in default mode doesn’t produce the results I want and changing the class names doesn’t work either

Read only link:
https://preview.webflow.com/preview/davids-cool-project-9b22c7?utm_medium=preview_link&utm_source=designer&utm_content=davids-cool-project-9b22c7&preview=454984bc0992fefc4eb788f0bcda7382&workflow=preview