I spent some time today investigating this, and I’m still not entirely sure what is going on! I can say that the difference between the two is that on the “In the Starfleet” Navigation menu symbol, the “Menu” group has animations and the “Logo (Nav Menu Open)” element has button states. If you remove the animations from the group (setting it to be visible) and use Edit > Clear Button States for the element, it will behave the same way as “The Pilot” Archive Menu symbol.
While not exactly desired in your case, I would probably consider the way The Pilot behaves to be more expected. When you change the Display of an element to hidden, it triggers a mouse out. This sets the button state to be back to normal. Setting Display to visible unfortunately doesn’t typically trigger mouse over events in web browsers, and thus the button also isn’t being activated.
You could probably work around this by doing the opposite approach of using the opacity on a lower z-index button, and then setting the display on the click state of the element above it.