Header Module Logo not appearing in Mobile/Tablet

SOLVE
SAncliff
Member

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: 

<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

 


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

0 Upvotes
1 Accepted solution

Accepted Solutions
SAncliff
Solution
Member

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/

 

We changed:

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: 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!

View solution in original post

6 Replies 6
BootstrapC
Top Contributor
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.

Jacob Lett - HubSpot Website Design Consultant
Creator of the Industrial HubSpot Theme which helps manufacturers quickly build their website or blog on HubSpot.

webdew
Top Contributor | Diamond Partner

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. 

 


SAncliff
Member

Hi @webdew & @BootstrapC, thanks for looking at this for me. The site is rocket-consulting.com

0 Upvotes
BootstrapC
Top Contributor

Hi @SAncliff - Your CSS stylesheet 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;
}
}

 

 


Jacob Lett - HubSpot Website Design Consultant
Creator of the Industrial HubSpot Theme which helps manufacturers quickly build their website or blog on HubSpot.

SAncliff
Solution
Member

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/

 

We changed:

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: 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!

View solution in original post

dennisedson
Community Manager

@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 😀

Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes