topic Re: Different logo on mobile - css not working in CMS Development

Different logo on mobile - css not working

seanddavies1 — Mon, 09 Oct 2023 09:29:36 GMT

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>

Re: Different logo on mobile - css not working

Anton — Mon, 09 Oct 2023 16:46:34 GMT

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

Re: Different logo on mobile - css not working

BarryGrennan — Mon, 09 Oct 2023 18:00:07 GMT

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"); } }

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

Re: Different logo on mobile - css not working

seanddavies1 — Mon, 09 Oct 2023 18:37:48 GMT

This worked perfectly, thank you so much!