Changing logo size in header.liquid - Here is the code. Please help!

Solved
Tourist
22 0 0
BELOW IS THE CODE TO MY HEADER.LIQUID

I am trying to change my logo size to be bigger. It is very small on desktop + mobile right now. Please help me!



<style> {% if section.settings.header_mobile == 'top' %} .footer-spacer{height:0px;} {% endif %} </style> <div class="header-mobile-{{ section.settings.header_mobile }} header-container drawer__header-container {% if settings.sticky_header %}sticky-header {% endif %} nav-{{ section.settings.navigation_type }}" data-section-id="{{ section.id }}" data-section-type="header-section" data-template="{{ template.name }}"> <!-- Header --> <header class="site-header" role="banner"> <div class="wrapper-fluid header-wrapper"> <!-- left icons --> <div class="nav-containers nav-container-left-icons"> <ul class="inner-nav-containers"> <li class="site-nav__item site-nav--open"> <a href="" class="site-nav__link site-nav__link--icon js-drawer-open-button-left" aria-controls="NavDrawer"> <span class="icon-fallback-text"> <span class="fas fa-bars fa-fw" aria-hidden="true"></span> <span class="fallback-text">{{ 'general.drawers.navigation' | t }}</span> </span> </a> </li> {% if shop.customer_accounts_enabled %} <li class="site-nav__item {% if section.settings.navigation_type != "hidden" %}large--hide {% endif %}"> <a class="site-nav__link site-nav__link--icon" href="/account"> <span class="icon-fallback-text"> <span class="fas fa-user fa-fw" aria-hidden="true"></span> <span class="fallback-text"> {% if customer %} {{ 'layout.customer.account' | t }} {% else %} {{ 'layout.customer.log_in' | t }} {% endif %} </span> </span> </a> </li> {% endif %} </ul> </div> <!-- Logo --> <div class="nav-containers nav-container-logo"> <ul class="inner-nav-containers"> {% assign image_size = section.settings.height_logo | prepend: 'x' %} {% assign image_size_mobile = section.settings.height_logo_mobile | prepend: 'x' %} {% if template.name == 'index' %} <h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization"> {% else %} <div class="site-header__logo" itemscope itemtype="http://schema.org/Organization"> {% endif %} <a href="/" itemprop="url" class="site-header__logo-link"> {% if section.settings.inverted_logo and template.name == 'index' or template.name == 'collection' or template.name == 'article' %} <img class="logo inverted-logo" src="{{ section.settings.inverted_logo | img_url: image_size }}" srcset="{{ section.settings.inverted_logo | img_url: image_size }} 2x, {{ section.settings.inverted_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.inverted_logo.alt | default: shop.name }}" itemprop="logo"> {% else %} <span class="inverted-logo">{{ shop.name }}</span> {% endif %} {% if section.settings.default_logo %} <img class="logo default-logo" src="{{ section.settings.default_logo | img_url: image_size }}" srcset="{{ section.settings.default_logo | img_url: image_size }} 2x, {{ section.settings.default_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.default_logo.alt | default: shop.name }}" itemprop="logo"> <img class="logo mobile-logo" src="{{ section.settings.default_logo | img_url: image_size_mobile }}" srcset="{{ section.settings.default_logo | img_url: image_size_mobile }} 2x, {{ section.settings.default_logo | img_url: image_size_mobile, scale: 2 }} 2x" alt="{{ section.settings.default_logo.alt | default: shop.name }}" itemprop="logo"> {% else %} <span class="default-logo">{{ shop.name }}</span> <span class="mobile-logo">{{ shop.name }}</span> {% endif %} </a> {% if template.name == 'index' %} </h1> {% else %} </div> {% endif %} </ul> </div> <!-- Navigation menu --> <div id="AccessibleNav" class="site-nav nav-containers nav-container-menu"> <ul class="inner-nav-containers"> {% for link in linklists[section.settings.main_menu_link_list].links %} {% if link.links != blank %} {% assign parent_index = forloop.index %} <li class="site-nav__item site-nav--has-dropdown {% if link.active %}site-nav--active{% endif %}" aria-haspopup="true" data-meganav-type="parent"> <a href="{{ link.url }}" class="site-nav__link" data-meganav-type="parent" aria-controls="MenuParent-{{ parent_index }}" aria-expanded="false" {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}> {{ link.title | escape }} <span class="fas fa-angle-down" aria-hidden="true"></span> </a> <ul id="MenuParent-{{ parent_index }}" class="site-nav__dropdown {% if link.levels == 2 %}site-nav--has-grandchildren{% endif %}" data-meganav-dropdown> {% for childlink in link.links %} {% if childlink.links != blank %} {% assign child_index = forloop.index %} <li class="site-nav__item site-nav--has-dropdown site-nav--has-dropdown-grandchild {% if childlink.active %}site-nav--active{% endif %}" aria-haspopup="true"> <a href="{{ childlink.url }}" class="site-nav__dropdown-link" aria-controls="MenuChildren-{{ parent_index }}-{{ child_index }}" data-meganav-type="parent" {% unless template.name == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%} tabindex="-1"> {{ childlink.title | escape }} <span class="fas fa-angle-right" aria-hidden="true"></span> </a> <div class="site-nav__dropdown-grandchild"> <ul id="MenuChildren-{{ parent_index }}-{{ child_index }}" data-meganav-dropdown> {% for grandchildlink in childlink.links %} <li{% if grandchildlink.active %} class="site-nav--active"{% endif %}> <a href="{{ grandchildlink.url }}" class="site-nav__dropdown-link" data-meganav-type="child" {% unless template.name == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless %} tabindex="-1"> {{ grandchildlink.title | escape }} </a> </li> {% endfor %} </ul> </div> </li> {% else %} <li{% if childlink.active %} class="site-nav--active"{% endif %}> <a href="{{ childlink.url }}" class="site-nav__dropdown-link" data-meganav-type="child" {% if childlink.active %}aria-current="page"{% endif %} tabindex="-1"> {{ childlink.title | escape }} </a> </li> {% endif %} {% endfor %} </ul> </li> {% else %} <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}"> <a href="{{ link.url }}" class="site-nav__link" data-meganav-type="child" {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}> {{ link.title | escape }} </a> </li> {% endif %} {% endfor %} </ul> </div> <!-- right icons --> <div class="nav-containers nav-container-right-icons"> <ul class="inner-nav-containers"> {% if shop.customer_accounts_enabled %} <li class="site-nav__item small--hide medium--hide {% if section.settings.navigation_type == "hidden" %}large--hide {% endif %}"> <a class="site-nav__link site-nav__link--icon" href="/account"> <span class="icon-fallback-text"> <span class="fas fa-user fa-fw" aria-hidden="true"></span> <span class="fallback-text"> {% if customer %} {{ 'layout.customer.account' | t }} {% else %} {{ 'layout.customer.log_in' | t }} {% endif %} </span> </span> </a> </li> {% endif %} {% if settings.search_enabled %} <li class="site-nav__item"> <a href="/search" class="site-nav__link site-nav__link--icon js-drawer-open-button-top" aria-controls="SearchDrawer"> <span class="icon-fallback-text"> <span class="fas fa-search fa-fw" aria-hidden="true"></span> <span class="fallback-text">{{ 'general.search.title' | t }}</span> </span> </a> </li> {% endif %} <li class="site-nav__item"> <a href="/cart" class="site-nav__link site-nav__link--icon cart-link js-drawer-open-button-right" aria-controls="CartDrawer"> <span class="icon-fallback-text"> <span class="fas fa-shopping-{{ settings.cart_icon }} fa-fw" aria-hidden="true"></span> <span class="fallback-text">{{ 'layout.cart.title' | t }}</span> </span> <span class="cart-link__bubble animated infinite rubberBand {% if cart.item_count > 0 %} cart-link__bubble--visible{% endif %} "></span> </a> </li> </ul> </div> </div> </header> </div> {% schema %} { "name": "Header", "class": "header-section", "settings": [ { "type": "image_picker", "id": "default_logo", "label": "Logo" }, { "type": "image_picker", "id": "inverted_logo", "label": "Transparent header logo" }, { "type": "range", "id": "height_logo", "label": "Logo height", "min": 40, "max": 60, "step": 2, "unit": "px", "default": 50 }, { "type": "header", "content": "Navigation" }, { "type": "select", "id": "navigation_type", "label": "Navigation type", "options": [ { "value": "left", "label": "Left" }, { "value": "right", "label": "Right" }, { "value": "center", "label": "Center" }, { "value": "center-logo", "label": "Logo center" }, { "value": "hidden", "label": "Hidden" } ] }, { "type": "link_list", "id": "main_menu_link_list", "label": "Menu", "default": "main-menu" }, { "type": "header", "content": "Mobile header" }, { "type": "select", "id": "header_mobile", "label": "Position", "default": "top", "options": [ { "value": "top", "label": "Top" }, { "value": "bottom", "label": "Bottom" } ] }, { "type": "range", "id": "height_logo_mobile", "label": "Logo height", "min": 20, "max": 40, "step": 2, "unit": "px", "default": 28 } ] } {% endschema %}
0 Likes
Pathfinder
98 12 27

Have you tried changing it in the theme customizer in your homepage? the same place you upload the logo you can change the size of it, if you've set logo size to max and it's still too small I have a feeling your logo file is too small, make the logo dimensions bigger for example 105x267 change it to 405x667

0 Likes
Tourist
22 0 0

Hi there. Yeah I have tried changing it there. I have also confirmed that my logo size is larger then what it shows on my website.

 

It looks bigger if I use other themes. There is something about the theme I am using that makes the logo appear much smaller then it should.

 

The only thing left that I can do to make it bigger is edit the code in header.liquid.

0 Likes
Pathfinder
98 12 27

The best way to make any style changes is to add overrides to the CSS it's easy and allows you to go back to default at any point, what theme are you using?

0 Likes
Tourist
22 0 0

Could you help me out here with the proper CSS to change the logo size for desktop + mobile?

 

The theme is Debutify.

0 Likes
Tourist
22 0 0

Also, which folder would I go and edit the code to add CSS in?

 

 

0 Likes
Pathfinder
98 12 27

add this to theme.scss.liquid at the bottom of the page, you get there by clicking Theme, Customize Theme, then in the bottom left of the theme editor is a dropdown box click it and select Edit Code, from there go to Assets and you will find theme.scss.liquid

 

/* SIZE OF LOGO BEFORE SCROLLING */

.site-header__logo-link > img { width: 230px !important; }

/* SIZE OF LOGO ONCE SCROLLED */
@media screen and (min-width: 590px) { .sticky-header.is-scrolling .site-header__logo .default-logo { width: 200px !important; } }

change "230px" to be more or less depending on how big you want the logo to be, the second bit of code is the size of the logo once you've scrolled, this should be smaller so that it fits in your header properly, I've set it to "200px"

1 Like
Tourist
22 0 0

You are awesome! Thanks a bunch. That worked great, the only thing is that the my logo appears to be a bit pixelated when viewing on my mobile phone.

 

The original image file is 300x125

 

The width is now set to 125 in the code you gave me for the CSS.

 

Do you think by adding a height variable into the CSS I can make it less pixelated?


Or do you have another suggestion to make the image crisp and clear?

0 Likes
Highlighted
Tourist
22 0 0

The image looks crisp on desktop, but it looks fuzzy and pixelated on  my mobile phones browser.

 

Any suggestions on how I can fix it?

0 Likes
Pathfinder
98 12 27

300x125 isn't very high quality for a logo, usually you should double the size of the image depending on what size you want it to display at, for example if I set an image to display at 125px wide I'd make the logo 250px wide, this is because people on retina/4k screens need higher res files than people viewing on standard 1920x1080 displays, your phone could be scaling images similar to retina so I'd make the logo file itself higher res and leave the code as you have it.

 

Also you don't have to exactly double the file size I'd just make sure if you're displaying an image 125px wide your file is at least double that, I make my logo files at least 400x650 ish just so that I have room to change the display size and it still look good, Shopify automatically compresses images so you don't have to worry about it taking up load time.

1 Like