Burger menu stacks on top of ad

[bryophyta]

On tablet views where both the page-top ad and also the burger menu icon are visible, the menu icon slides over the top of the ad banner as you scroll down the page:

This seems to be caused by a z-index issue (as @cemms1 noted when raising the issue originally). The ad has a lower z-index than the menu icon.

We could fix this bug by reversing the z-index values on these elements. However, I don't know who 'owns' these parts of this codebase, and the bug will re-emerge if the values get out of sync in the future. It looks to me like we could fix it by creating a new stacking context in the <header> element which is the parent to the icon, and a sibling to the ad banner, so that their z-indexes will no longer be used to position them with respect to each other. We could do this by putting isolation: isolate on the header element:

However, I'm not sure whether the z-index on the icon was intended to do something outside of the <header> tag originally. If so, creating the new stacking context may undercut the intended behaviour, too. Additionally, I can't actually find where in the codebase these styles are set! (I can only find the relevant classes and values in the built css files.)

[jlieb10]

Reasonably high priority because ad/revenue related. Best solved by pair with someone familiar with the frontend codebase as the styles are done differently there.