Different logo on mobile - css not working

Developer Support CMS Development
1

I’m trying to use some CSS I found on another forum post to show a different logo on mobile screens (due to the background colour on mobile making the logo not visible).

I have tried adding it in the global site header settings and also on individual page settings but can’t get it to work.

The “replace default logo” option is enabled in the header settings for the logo, so I’m not sure if that somehow overwrites the CSS I’m using below.

Any ideas?

<style>@media screen and (max-width: 767px) {.header-logo {content: url("https://7506377.fs1.hubspotusercontent-na1.net/hubfs/7506377/Logo.png");}}</style>

2

Hi @seanddavies1,
displaying a different logo on mobile is a little bit more work.
Changing the CSS is a great start but you need also to remove the initial logo for that.

You have several options:

1. Change the header.html file to something like

<header class="desktop">
...
<div class="logo">
{% module 'dekstop_logo' path="/@hubspot/logo.module" label="Desktop logo"%}
</div>
...
</header>

<header class="mobile">
...
<div class="logo">
{% module 'mobile_logo' path="/@hubspot/logo.module" label="mobile logo"%}
</div>
...
</header>

This will give you two logo options in your global header settings. You’ll need to check the “overwrite logo” setting in the mobile one and select your desired logo

2. Working with only CSS

First you’ll need to delete the logo module from the header.html file. After that you can write your code something like this:

{# start mobile logo #}
@media screen and (max-width: 767px) {
.header-logo {
content: url("https://7506377.fs1.hubspotusercontent-na1.net/hubfs/7506377/Logo.png");
}
}

{# start desktop logo #}
@media screen and (min-width: 768px) {
.header-logo {
content: url("PATH-TO-DESKTOP-LOGO");
}
}

3. Working with brandkits:

You can add the brandkit logos to the CSS approach like this:

{# start mobile logo #}
@media screen and (max-width: 767px) {
.header-logo {
content: url("{{brand_settings.logos[1].src}}");
}
}

{# start desktop logo #}
@media screen and (min-width: 768px) {
.header-logo {
content: url("{{brand_settings.primaryLogo.src}}");
}
}

you’ll need to set the desktop one as primary(first) logo and the mobile one as the second one.

best,

Anton

3

I took a quick look at your site and there doesn’t seem to be any element with a class “header-logo”.
The method you posted seems to work when targeting your logo correctly like so:

@media screen and (max-width: 767px) {
#hs_cos_wrapper_site_logo img {
content: url("https://7506377.fs1.hubspotusercontent-na1.net/hubfs/7506377/Logo.png");
}
}

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

4

This worked perfectly, thank you so much!