I have added web maps to my Hub site and have the legends enabled so they can be viewed in the map view pane. However, when I click a pop-up it shows behind the legend, so you can't really see it. Is there a way to bring the pop-ups to the front of the pane when selected? The only other idea was to set the legend as static on the page, but then they would not update when the web app is updated.
The legend also blocks the zoom in/out buttons I ended up creating static images for my legend since there were only 2 classes and they weren't going to change. Another solution might be to create a web app viewer and embedding it as an iframe content.
I second Dante's comments above.
I would create a Web App with the legend and zoom options in different locations. Adding this as an iframe would then avoid some of the direct input issues that you could be experiencing currently.
Best of luck!