Swap out Logo on Mobile
In this article, we're going to teach you how to use a different logo on mobile devices in X.
Why You Would Want to Use A Different Logo On Mobile
One of the most common reasons why website owners would want to use a logo on mobile (also in tablets) that is different from the desktop version is that of space. A logo that fits on a desktop version doesn't always fit the same way in tablets and mobile devices.
Take this logo for example.
On a desktop, the logo has no problem fitting with the main navigation in just one line. However, on smaller devices, like tablets, due to length of both the logo and the navigation, the latter is pushed downwards.
In web design, this doesn't look very good and there are several design options for fixing that. One of them is to use a different logo for smaller devices. Let's say you chose this route and you want to use your simpler, smaller logo as shown below.
Accomplishing this using the Pro header builder is easy. All you need to do is to use the Hide Based On Screen Size option to use different logos. But in X, it's not that straightforward. What follows are the actual steps.
How to Swap out the Logo for Mobile Devices
- Go to WP Admin > Media > Add New.
- Upload the logo you want to use in smaller devices.
- After you're done uploading, you'll see something like below. Click the Edit hyperlink.
- You'll see an Edit screen like below. Leave this screen open as we'll revisit this a couple of steps from now.
- Open a new browser tab and go to your site's admin area.
- Now go to X > Theme Options > CSS and add following code:
@media (max-width: 979px){
.x-brand.img {
background: url(ENTER URL HERE) no-repeat center center;
background-size: 100% 100%;
}
.x-brand.img img {
opacity: 0;
}
}- On the part of the code that says ENTER URL HERE, you need to paste the URL of the new logo file.
- To get the URL, go back to the Edit Screen in step 4, and copy the File URL.
- Go back to the CSS code in step 6 and paste the File URL to take the place of ENTER URL HERE.
- Click Save.
Summary
Great job! You've just switched out the logo for smaller devices.
See something inaccurate? Let us know