Custom Logo for mobile

  • Resolved paintpaul

    (@paintpaul)


    6 years, 6 months 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)

  • 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 6 years, 6 months ago by martineller.
    Thread Starter paintpaul

    (@paintpaul)

    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?

    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)

    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)

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

    Beatriz

    (@beatrizlanchas)

    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;
    }}

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Custom Logo for mobile’ is closed to new replies.