# Header Module Logo not appearing in Mobile/Tablet

**URL:** <https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808>\
**Category:** CMS Development\
**Tags:** design-manager, html\
**Created:** [June 11, 2021, 3:55pm UTC](https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808 "2021-06-11T15:55:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![SAncliff](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sancliff/32/27089_2.png) [@SAncliff](https://community.hubspot.com/u/SAncliff)\
**Post date:** [June 11, 2021, 3:55pm UTC](https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808/1 "2021-06-11T15:55:08Z")

</div>

I’m trying to resolve an issue for a client at the moment where their logo is not visible in mobile/tablet view.  
I suspect it is because the module styles the image as a background image (although my development skill is very limited, so I could be completely wrong here).  
This is the code for the logo module:

```lia-code-sample
<div class="custom-logo">
 {% if module.img.override_inherited_src %}
 <a href="{{ module.link }}" style="background-image:url({{ module.img.src }})">Rocket </a>
 {{ module.logo.alt }}
 {% else %}
 <a href="{{ module.link }}" style="background-image:url({{site_settings.logo_src }})">Rocket</a>
 {% endif %}
</div>

```

and this is the header group

 ![SAncliff_0-1623426849055.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/9/392de09a4c01aeb163c10f9a0b29e0e09b843eeb.png)

If anyone could point me in the right direction that would be massively appreciated!

---

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [June 12, 2021, 2:38pm UTC](https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808/2 "2021-06-12T14:38:08Z")

</div>

Could you please provide a url to preview the page? The code you have looks good. If it appears on desktop but hidden on mobile there must be a media query style hiding it. You could try removing the .custom-logo class to see what that does.

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [June 14, 2021, 2:01pm UTC](https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808/3 "2021-06-14T14:01:49Z")

</div>

Hi @SAncliff ,  
This is due to logo add in background image. We need to fix height or for more understanding what coding is it? It will be helpful if you provide me link of the website.

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![SAncliff](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sancliff/32/27089_2.png) [@SAncliff](https://community.hubspot.com/u/SAncliff)\
**Post date:** [June 14, 2021, 2:17pm UTC](https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808/4 "2021-06-14T14:17:22Z")

</div>

Hi [@webdew](https://community.hubspot.com/t5/user/viewprofilepage/user-id/131510) & [@Jake\_Lett](https://community.hubspot.com/t5/user/viewprofilepage/user-id/72866), thanks for looking at this for me. The site is [rocket-consulting.com](http://rocket-consulting.com)

---

<div class="post-metadata">

**Author:** ![Jake\_Lett](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jake_lett/32/45178_2.png) [@Jake\_Lett](https://community.hubspot.com/u/Jake_Lett)\
**Post date:** [June 14, 2021, 8:40pm UTC](https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808/5 "2021-06-14T20:40:27Z")

</div>

Hi @SAncliff - Your [CSS stylesheet](https://www.rocket-consulting.com/hs-fs/hub/3462882/hub_generated/template_assets/5926262518/1623685163219/Rocket_Consulting_July2018_Theme/Coded_Files/Rocket_Consulting_July2018-style.css) has a rule to hide the logo when the window is larger than 840px wide.

You could try the following steps:

1. Open Rocket\_Consulting\_July2018-style.css

2. Search for the code shown below and delete what is strikethrough. This will apply your desktop style which shows the logo image on mobile.

@media (max-width: 840px) {

~~.custom-logo a {~~

~~display: block;~~

~~font-weight: 400;~~

~~font-size: 1.0625rem;~~

~~padding: 0;~~

~~width: 75%;~~

~~line-height: 2.8125rem;~~

~~height: 2.8125rem;~~

~~color: #fff;~~

~~background-image: none !important;~~

~~}~~

}

~~@media (min-width: 841px) {~~

.custom-logo a {  
display: block;  
position: absolute;  
width: 117px;  
top: -79px;  
left: -15px;  
height: 62px;  
margin: 54px 0 0 15px;  
background-repeat: no-repeat;  
background-size: cover;  
font-size: 0px;  
background-position: 0 -124px;  
}

~~}~~

---

<div class="post-metadata">

**Author:** ![SAncliff](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sancliff/32/27089_2.png) [@SAncliff](https://community.hubspot.com/u/SAncliff)\
**Post date:** [June 15, 2021, 8:48am UTC](https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808/6 "2021-06-15T08:48:12Z")

</div>

Hi everyone and thanks for your help so far. HubSpot support jumped in and made the below change, which seems to have resolved the issue, copied below for if anyone else has a similar problem.  
We swapped this out for a normal image instead and now it fits well on desktop and mobile: [https://www.rocket-consulting.com/](https://www.rocket-consulting.com/)

We changed:

> **[Design Manager | HubSpot](https://app.hubspot.com/design-manager/3462882/modules/5927254715/revisions/48797713166)**

to the following:

`<div class="custom-logo"> {% if module.img.override_inherited_src %} <a href="{{ module.link }}"><img src="{{ module.img.src }}" alt="{{ module.logo.alt }}"></a> {% else %} <a href="{{ module.link }}"><img src="{{site_settings.logo_src }})"></a> {% endif %}</div>`

We also added some slight CSS, on line 4909 of the stylesheet to help center the image: [Design Manager | HubSpot](https://app.hubspot.com/design-manager/3462882/code/5926262518)

This should resolve your issue -- please let me know if you have any further questions about this!

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [June 15, 2021, 2:46pm UTC](https://community.hubspot.com/t/header-module-logo-not-appearing-in-mobile-tablet/38808/7 "2021-06-15T14:46:55Z")

</div>

@SAncliff , Thanks for sharing!

Just an FYI, no one who is not a user in your portal will be able to open the app links.

You can do a screenshot or add a code block to show 😀