CSS display issue - mobile - overlap (FD)

[S-Haime]

Report Accessibility Issue

Describe the inaccessible feature

"I have a very small point about viewing your website on mobile devices. Whereas the desktop version displays a banner menu with Articles, Submissions etc., on mobile this appears as three horizontal lines in the upper left that you click to see these options. However, the three lines appear on my phone right in the middle of the journal logo, and it actually looks like a design element of the logo instead of a clickable menu. Took me a minute to find the author guidelines so I figured I'd pass this along. Doesn't seem like I can attach a picture unfortunately."

Which users are impacted?

1. Everyone

Janeway version

1.5.6.

Preferred Solution

Clickables to not overlap (with logos or images)

Front-end Issues (only)

If the issue is front-end specific please add the following details: Unknown, but reproduces on multiple mobile platforms.

Additional context

See #FD8856 for original report. Themes: Material (reported), OLH (also affected)