SVG Code in Header

Solved
New Member
3 0 0

Hi there, so I know there are multiple threads on this but they all have a unique difference in theme and I am unable to come up with a full solution based on the threads i found on google. I actually almost have it but I'm trying to have an SVG logo in my header. I used someone's code posted in another thread as follows:

 {% if section.settings.logo-inverted and template.name == 'index' %}
                  <a href="/" itemprop="url" class="site-header__logo-link">
                    <img src="{{ 'logo-inverted.svg' | asset_url }}"
                    srcset="{{ 'logo-inverted.svg' | asset_url }} 1x, {{ 'logo-inverted.svg' | asset_url }} 2x"
                    alt="{{ section.settings.logo-inverted.alt | default: shop.name }}"
                    itemprop="logo"> 
                  </a>
                {% elsif section.settings.logo %}
                  <a href="/" itemprop="url" class="site-header__logo-link">
                     <img src="{{ 'logo.svg' | asset_url }}" 
                     srcset="{{ 'logo.svg' | asset_url }} 1x, {{ 'logo.svg' | asset_url }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     itemprop="logo"> 
 
The SVG logo actually does display on mobile, but nothing on desktop. Someone said to get this to work all they did was add a "width" tag after the img tag. Well, I've tried this in 100 different ways, whenever I do add any code after the img tag then the logo will display on desktop but it shows the code as well.

Any help would be appreciated. As a side note in frustration, I wonder, how is it possible a billion-dollar eCommerce platform does not have the option to directly upload an SVG logo without doing manual coding? I would think most companies that are driving traffic to their websites are not going to want a pixelated PNG logo. 

 

0 Likes
Shopify Partner
100 19 18

HI @kylebinder 

Can you please share the website url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes
New Member
3 0 0

Success.

Shopify Partner
100 19 18

Add this code in the theme.scss

 

Go to edit code> assets> theme.scss and paste this code at the very bottom of page.

 

.site-header__logo img {
    width: 100%;
}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
1 Like
New Member
3 0 0

God bless you, I literally spent 3 or 4 hours trying to do this simple thing. I was thinking about posting on a freelance website to pay to get this done.

0 Likes
Shopify Partner
100 19 18

okay :)

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
0 Likes