Articles on: Customizer [Header]

How to Display a Different Logo on Mobile? (Pro)

Generally, you might want to use a larger logo on the desktop. However, displaying the same logo on mobile might not be a good idea. That’s because the logo used on the desktop might not appear good on the mobile.

Another reason to use a different logo on mobile is that loading a comparatively small logo on mobile will save bandwidth in case your site is loading without a Wi-Fi connection.

So, how do you display a different logo on a mobile? No worries, Zakra has exactly the feature you are looking for.

From version 1.4.0, Zakra Pro has introduced a new feature called Mobile Logo. With this feature, you can avoid all the cases mentioned above by adding a separate mobile logo.

Follow the instructions listed below:

From your WordPress Dashboard, navigate to Appearance > Customize > Header & Navigation & > Site Identity.

Scroll down, and find a setting called Mobile Logo, where you will see two available options – Logo and Height.

Under the Logo option, click Select Image and choose an appropriate logo for Mobile devices from the Media Library.

Similarly, you can adjust the height of the logo using a Height option.

Upload a different logo for Mobile in Zakra

Note: This feature is only available in Zakra Pro.

Updated on: 16/07/2023

Was this article helpful?

Share your feedback


Thank you!