Mobile Logo

[NightOwl]

I'm trying to set a different image for the logo that shows on mobile devices, but so far everything I've tried just changes the primary logo image as well. Any suggestions?

Home - Night Owl Freelance

new.nightowlfreelance.com

 

[robcsaszar]

You can use some CSS media queries for that.
Or is that something you want to avoid?

 

[Lee]

Media queries are the way to go IMO.

Unless there is a reason they are being avoided, would need to know more about the project.

 

[NightOwl]

You can use some CSS media queries for that.
Or is that something you want to avoid?

Media queries are the way to go IMO.

Unless there is a reason they are being avoided, would need to know more about the project.

Thanks for the responses!

I've been working with this code, which has made the main logo disappear on mobile but isn't showing the alt img, so I'm trying to troubleshoot that now, but I'm not getting very far...

/* assuming mobile-first approach */
.navbar .navbar-brand a {
display: block;
background: url(/wp-content/uploads/2020/08/[email protected]) no-repeat;
width: 288px;
height: 64px;
}
.navbar .navbar-brand img {display: none;}

@media screen and (min-width: 37.5em) { /* adapt width to your needs */
.navbar .navbar-brand a {
background: none;
width: auto;
height: auto;
}
.navbar .navbar-brand img {display: block;}
}

 

[robcsaszar]

Thanks for the responses!

I've been working with this code, which has made the main logo disappear on mobile but isn't showing the alt img, so I'm trying to troubleshoot that now, but I'm not getting very far...

/* assuming mobile-first approach */
.navbar .navbar-brand a {
display: block;
background: url(/wp-content/uploads/2020/08/[email protected]) no-repeat;
width: 288px;
height: 64px;
}
.navbar .navbar-brand img {display: none;}

@media screen and (min-width: 37.5em) { /* adapt width to your needs */
.navbar .navbar-brand a {
background: none;
width: auto;
height: auto;
}
.navbar .navbar-brand img {display: block;}
}

The approach is correct, but you'd need to provide the media query with an actual background image to replace the background with, as it straight up hides it now:

background: none;

Based on your current logo is named, replace:

background: none;

with something like:

background: url(/wp-content/uploads/2020/08/Night-Owl_Main.png) no-repeat;

Hope that helps.

 

[Gummibeer]

The way to go would be to use modern <img/> attributes like secret, sizes, an alternative <source/> tag or similar.
This way you keep up a syntactic correct image element and still can use a different image for given resolutions.

 

[NightOwl]

The approach is correct, but you'd need to provide the media query with an actual background image to replace the background with, as it straight up hides it now:

background: none;

Based on your current logo is named, replace:

background: none;

with something like:

background: url(/wp-content/uploads/2020/08/Night-Owl_Main.png) no-repeat;

Hope that helps.

Yeah, my thoughts as well. But when I do that I see both logos on top of each other in all views.

 

[robcsaszar]

Yeah, my thoughts as well. But when I do that I see both logos on top of each other in all views.

Whoops, I wasn't paying enough attention to your CSS.
An amalgamation of CSS would be needed there, since you'd need a media query for the PC view there (max-width for small screens and min-width for larger screens).

Also, as @Gummibeer said, you could an alternative to media queries, something like this:
Using srcset for changing resolutions

Furthermore, looking at your logo, I'd also suggest looking into this:
Responsive logos: what they are and why you need one

 

[NightOwl]

Yeah, logo wise, I've done that. The mobile logo is different than what's there now:

http://new.nightowlfreelance.com//wp-content/uploads/2020/08/[email protected]