Update mobile template to add max width for logo/header image

[lstachew]

Is your feature request related to a problem? Please describe. Weave noticed that on mobile, their logo/header image overlaps with the hamburger icon at the top (see screenshot-logo-overlap). We found that if we made the logo taller by adding more white space on the top and bottom of the image (essentially making the logo less wide, proportionally) this solved the issue on mobile (see screenshot-mobile-view-new), however, as a result, on the desktop view, the logo became much smaller (see screenshot-weave-desktop).

Describe the solution you'd like Update the mobile template so that there is a maximum width to the logo/header image. Since we found that making the logo taller fixed the issue on mobile, it seems that a lack of width constraint is what is causing wider logos to run into the hamburger icon.

Screenshots:

[joemull]

What we might fix in tandem with this is the persistent issue where the navigation items run into the journal logo.

This might be possible by moving the items closer together if they start to overlap the logo.

This is only an issue for navigation bars with lots of items, and only at a certain width before the webpage switches to the small screen layout with the collapsed navigation menu.

[StephDriver]

What we might fix in tandem with this is the persistent issue where the navigation items run into the journal logo.

This might be possible by moving the items closer together if they start to overlap the logo.

This is only an issue for navigation bars with lots of items, and only at a certain width before the webpage switches to the small screen layout with the collapsed navigation menu.

more info at #4052