A user is experiencing an issue where their header logo displays at normal size on the landing page but shrinks significantly on all other pages of their Shopify store.
Root Cause Identified:
The problem stems from inconsistent HTML structure—the logo on the homepage is wrapped in <h1 class="header__heading"> but this wrapper is missing on other pages.
Proposed Solutions:
Conditional Logo Code (ProtoMan44): Modify the header.liquid file to use conditional logic that checks if the template is the index page, then applies appropriate styling. This involves wrapping logo code in {% if template contains 'index' %} tags.
CSS Override (Raj-webdesigner): Add CSS rules to the base.css file targeting .header__heading-logo with specific height and max-width values (55.02px or 110.4px depending on desired outcome) using !important to force consistent sizing across all pages.
Both solutions aim to standardize the logo appearance, though the user hasn’t confirmed which approach resolved their issue.
Hello, for some reason whenever i go to a different page other then landing page my header logo shrinks massively… Ive been trying to figure it out but have had no luck, very frustrating. Any help is GREATLY appreciated!
Site is https://aomobiledetailing.com
@ATGRFX hey, thanks for posting here.
i have read the code there is issue that Ion home page logo had parent
so for now go to header file and edited the logo code
{% if template contains 'index' %}
#
{% else %}
{% endif %}
if it helpful so please mark it as solution , thanks.
Thanks for the reply, where exactly do i enter the code in header.liqud? I tried at the bottom and it didnt do anything
If you want a logo similar to the header of another page in the home page, then put this code edit Code > base.css file.
.header__heading-logo {
height: auto;
max-width: 55.02px !important;
}
And if you want to put home page logo same size in your other pages then put this code in your edit code > base.css file
.header__heading-logo {
height: auto;
max-width: 110.4px !important;
}