My Sticky Header Logo looks very small on mobile devices. How can I increase its visibility?
Some logos are more challenging than others to display on a mobile device, due to the varying shapes and sizes of a given logo.
Square logos can work very well, but logos that are very wide can be difficult to make legible. In most cases this can be solved with these steps:
1. Crop the logo image so there is little or no vertical blank space around the logo. Here's an example of such an image as viewed in Photoshop:
The logo should be at least 200px wide.
2. Upload the logo in Appearance > Theme Images > Sticky Header Logo. Be sure to add Alternative Text so the image is understandable to users with visual impairments.
And for the Size setting make sure to select Full Size:
3. Click the Use This Image button, the Save Options button. When the Sticky Header Logo is visible, it should be much more legible.
Caveats and Workarounds
Some logo designs work better than others on small screens, and that's just a fact of life in a world of mobile devices.
If a logo simply won't work, you can display the Site Title instead by not uploading a Sticky Header Logo, or by deleting it if it's already been uploaded.
To delete the Sticky Header Logo just click the red (-) button under the image, then Save Options:
The Site Title, set in Settings > General > Site Title, will display instead of any logo.
If your site has a very long Site Title, you can enter a shortened version in Appearance > Theme Options > Navigation > Alternate site name for sticky navigation. Then, whenever the sticky nav is active, it will display the text instead of a logo.
Note that if your site title remains too long to display at certain screen sizes, Largo will truncate the title and add an ellipsis after the site name.