I need to fix the CSS so that the GIF shows up only when the menu is open, as it provides a means of exiting the menu in Safari and Firefox on my iPad, or have it not cover the logo, or give the logo a higher z-index.
I first tried changing the z-index, but since the logo is not positioned, this did not work. As the quickest solution, I positioned the invisible GIF on the right and made sure it didn't cover the logo by setting its width to calc(100vw - 275px). On my iPad, Safari and Firefox do not let me exit the menu by tapping on the screen anywhere except the menu, though tapping on the uncovered part of the logo or the Google search box on the homepage do both exit the menu. With that in mind, I put an invisible GIF to the left of the hamburger menu box. So, if you tap on that in Safari or Firefox on an iOS device when the menu is open, that should close it.
I first tried changing the z-index, but since the logo is not positioned, this did not work. As the quickest solution, I positioned the invisible GIF on the right and made sure it didn't cover the logo by setting its width to
calc(100vw - 275px). On my iPad, Safari and Firefox do not let me exit the menu by tapping on the screen anywhere except the menu, though tapping on the uncovered part of the logo or the Google search box on the homepage do both exit the menu. With that in mind, I put an invisible GIF to the left of the hamburger menu box. So, if you tap on that in Safari or Firefox on an iOS device when the menu is open, that should close it.