Custom Logo for mobile

Resolved paintpaul
(@paintpaul)

8 years, 1 month ago

The Logo looks very nice on desktop. But on mobile the logo is a little bit too big and has too much text. So I would like to have a custom logo on mobile. Only the can. Is that possible with additional CSS?

Thank you very much in advance!

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

martineller
(@martineller)

8 years ago
Hello,
try this code (insert in Appearance / Customize / Additional CSS):
```
@media ( max-width: 400px ) {
.site-header .custom-logo {
	background-size: contain;
	max-height: 50px;		
}}
```
The value 50px determines the size of the logo, the value 400px the size of the mobile device. In Hamilton there are still the predefined sizes: (400px), 620px, 750px, 800px, 1000px, 1380px. For each of these sizes could be assigned a size of the logo.
- This reply was modified 8 years ago by martineller.
Thread Starter paintpaul
(@paintpaul)

8 years ago

thank you very much @martineller !

the code works, but I want a different image on mobile. how do I switch the regular logo with a custom logo on mobile?

martineller
(@martineller)

8 years ago

I believe that the logo is an integral part of WordPress and therefore can not be easily changed for different devices (not by simple CSS commands in Hamilton). Maybe you can find a plugin for this feature.

Thread Starter paintpaul
(@paintpaul)

8 years ago

I see. thank you anyways! 🙂 I think I use your code snippet to make the appearance on mobile better, while I search for a suitable plug in.
thanks again

Beatriz
(@beatrizlanchas)

8 years ago

Thanks @martineller! I have tried this too and your code works fine for me.

Beatriz
(@beatrizlanchas)

8 years ago

Although the code is working, is causing some trouble in the Menu’s display. At least on the iPhone. The first Menu item is displayed underneath the logo image if I use the following code in the additional CSS-Code:

@media ( max-width: 400px ) {
.site-header .custom-logo {
background-size: contain;
max-height: 100px;
}}

martineller
(@martineller)

8 years ago

Hello,
there really seems to be a problem. On Samsung Galaxy the first line is half hidden by the logo after the first start. After that, after calling a second page and reopening the menu, it will be displayed correctly. (This problem can not be simulated with Firefox test mode [Ctrl + Shift + M]: there are different iPhone formats displayed correctly in the test.) I think it’s because of different interpretations of Java code in different browsers / devices.