Yes, you can have different logos on different display.
Using media queries you can just specify a different logo.
If you look on my site – http://www.bluelimemedia.com/
My logo is big on the desktop, but then at smaller size, I just swap the image for a smaller one.
No, that’s not what I mean at all. I want a logo with big text on 2 lines at the large size and then a smaller, narrower logo with text on 4 lines. I want to use two COMPLETELY different logo arrangements
Using a responsive desgin you can’t just change the src=”” URL of an image to point to a different image. It doesn’t work that way. If you want to do it that way you’ll have to set up a slightly complicated JavaScript script to check the windows resize event and set the image acordingly.
The correct way to do this in a responsive layout is to use CSS. Set up an area as the logo area and set the logo image file as it’s background image. Then when the screen size gets down to the required size, set teh background as the smaller image and set the correct sizing on that element.
Sounds like a cool idea – anyone have a sample line of code to show me how to do that?
Sample code… for which bit?
I’m looking for exactly how to implement this. Do I just edit my css? If so what code do I insert to have say 3 different logos for 3 screen sizes from large to iphone?
Yes, you should be able to jsut edit your CSS – if you’ve got your header.php file set up with the right code for the logo.
As an example (not tested, but just to give you an idea):
Header.php:
<div id="header_logo"></div>
CSS:
#header_logo {
width: 250px;
height: 100px;
background: url("path/to/image.jpg") top left no-repeat;
}
@media screen and (max-width: 500px) {
#header_logo {
width: 100px;
height: 50px;
background: url("path/to/image_small.jpg") top left no-repeat;
}
}
I think this code gets me closer. Here’s the code that the maker of my theme suggested but it does not allow for different logo designs like yours does. Where would I insert a call for a different logo at each size:
@media only screen and (max-width: 479px){
img#logo {height: 220px; width: 220px;}}
@media only screen and (max-width: 767px){
img#logo {height: 240px; width: 360px;}}
@media only screen and (max-width: 960px) and (min-width: 768px){
img#logo {height: 240px; width: 380px;}}
img#logo {height: 244px; width: 480px;}
They said adding this to my CSS is all I have to do?
@media only screen and (max-width: 479px){
img#logo {height: 220px; width: 220px; background: url('path/to/image.jpg')}}
That’s all you need to do.
Thanks for the help on this! The second logo appears on the phone size but the first logo doesn’t go away – so I have 2 logos on top of each other?
There’s no way to tell what’s going on there without you posting either a a link or some code. My only guess at this stage is that you haven’t set up the HTML the right way and there’s two areas that the logo can be in, not one.
What kind of link? This is a template from Elegant Themes.
A link to your actual site. Like I said, it’s impossible to see what’s happening without actually seeing anything that you have done there.
It’s at the top of this post but here it is again:
http://bbarwa.redwebtest.com/
Ahhh sorry. I should have looked back up there.
I’ve had a look and I can’t see the logo doing anything at all. The media rules kick in but it looks like they are all pointing to the same logo file.
BUT, one thing that I did see is that you didn’t do what I said. You have to remove the <img> tag that contains the logo and use a <div> tag instead and have the background attached to the div. Images can’t have other images as backgrounds so the way that you’ve got it set up now won’t work.
