Change logo on mobile devices

  • Hi!
    I have .png file as a logo (.site-logo) on top of the randomize background, positioned for web.
    I am trying to make this logo change to a different one, small without text, for mobile devices.
    Did upload logo with Site Title, Tagline, and Logo.
    Only using this code to position it:

    .site-logo {
	-ms-transform: translate(-154px, 53px);
	-webkit-transform: translate(-154px, 53px);
	transform: translate(-40px, 104px);
}

    Was trying to use this code for change logo on mobile devices:

    @media only screen and (max-width: 520px) {
	#logo img {
		visibility: hidden;
	}
	#logo {
		background: url(https://*****/wp-content/uploads/2016/10/sp_logo.png ) left center no-repeat;
		background-size: contain;
	}
	#logo a {
		float: left;
	}
}

    …or any like codes with no results.
    Seeking for help plz :O)

    Thanks in advance.

    • This topic was modified 8 years, 4 months ago by bubdadigger.
Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello @bubdadigger,

    If you give us a link to your site it would be more easier to help.
    Take a look here How to have a different logo on mobile view wordpress

    SYA ??

    Thread Starter bubdadigger

    (@bubdadigger)

    Sure
    https://squarepixel.net/
    Don’t mind all mess around, just trying to figure out what is what.

    I did visit your link before couple of time, was searching for an answer for hour now.
    Been trying dozens of ideas, none of them works aside of simple one, turning logo off on mobile devices…

     @media only screen and (max-width: 800px){
.site-logo {
display: none;
} 
}

    Hello @bubdadigger,

    In Sela theme the only CSS rule for the logo is .site-logo
    So, to replace it on window resize their is quite a lot of methods…
    Keeping it simple :

    @media screen and (max-width:600px){
    .site-logo{
        width:25%;
    }
}

    You can of course, since you have a child theme, have two logos (desktop/mobile)
    See this for an example.

    SYA ??

    Thread Starter bubdadigger

    (@bubdadigger)

    I was hopping to get an idea on replacing big desktop icon with small mobile.
    Well here is an other question then – in which part of header.php file should I place new div?

    If I am placing it inside <div class=”site-branding”> it simply enlarge site-branding area so logo and menu sitting in a middle of it.
    So I may need to change css again to fix it. Can you help me?

    @bubdadigger: I took a look at your site’s code but am not currently able to see a second (or any) logo.

    Could you add it back so that we’re able to see the issue you described and suggest a fix?

    If you place the second, smaller logo inside <div class=”site-branding”> then you can use display: none; in your CSS to completely hide it on desktop devices. It should not enlarge your header area.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change logo on mobile devices’ is closed to new replies.