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.