Mobile Logo

Mobile Logo

NightOwl

Member
Local time
02:47
Joined
Aug 17, 2020
Messages
7

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?

 
Last edited:

robcsaszar

Member
Gold Member
Local time
10:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

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

 

Lee

Member
Local time
08:47
Joined
Aug 8, 2020
Messages
18

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

Member
Local time
02:47
Joined
Aug 17, 2020
Messages
7

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

Member
Gold Member
Local time
10:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

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:
CSS:
background: none;
Based on your current logo is named, replace:
CSS:
background: none;
with something like:
CSS:
background: url(/wp-content/uploads/2020/08/Night-Owl_Main.png) no-repeat;

Hope that helps.

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
09:47
Joined
Oct 5, 2019
Messages
1,161
Pronouns
he/him

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

Member
Local time
02:47
Joined
Aug 17, 2020
Messages
7

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:
CSS:
background: none;
Based on your current logo is named, replace:
CSS:
background: none;
with something like:
CSS:
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

Member
Gold Member
Local time
10:47
Joined
Oct 22, 2019
Messages
37
Pronouns
he

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

 
Top