Narrative theme - Adding logo (png/svg) overlay on slider section

[PauloL]

@KetanKumar hello!

Thank you,

This is the link
https://hln-europe.myshopify.com/

The name of the store is different now and the logo is the one you see bellow ("alpha bravo"). I have the svg logo made, and imported into the files. I just need to find out where to change the code on the Narrative Theme...

Is this anywhere close? This is the original code...


Thank you for your help,

Paulo

[KetanKumar]

@PauloL 

Thanks it can be done custom code

[PauloL]

Yes it can

Can you point me to where should I change the code? Any hint?

Thank you

[KetanKumar]

@PauloL 

Yes, i think are you able code 

see this article 

https://marketingfuzz.com/svg-logo-in-shopify

[PauloL]

Lovely, thank you very much

I have seen that article before and it is very helpful. But in the Narrative theme, I find that the code has different references for the source.

            <img class="site-header__logo-image" src="{{ section.settings.logo | img_url: image_size }}" srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">

Thats where Im stuck at... it differs from the Debut Theme code presented on the article..


Thank you very much for your help

[KetanKumar]

@PauloL 

Thanks or the update and support.

[achoo2]

Hi @KetanKumar 

do you mind posting the code here so I can learn a bit of DIY?

[PauloL]

@achoo2 this was what I did:

1 - On you shopify store, go to COSTUMIZE and on the header section, upload the logos you want (png or jpeg)

2 - Go to your code, select the ASSETS folder. Upload your .svg file

2 - Then under SECTIONS, select the HEADER.LIQUID

3 - Look for where you have the word "LOGO" on the code

4 - Replace the section with this:
(notice the first line "<div class="site-header__logo h1" ....  it is where the code starts, dont delete this line!>

<div class="site-header__logo h1" itemscope itemtype="http://schema.org/Organization">

        {%- if request.page_type == "index" -%}
          {%- if section.settings.logo_slideshow != blank -%}
            <a href="/" itemprop="url" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
              <img src="{{ 'Logo_w.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ shop.name }}" itemprop="logo">
            </a>
          {%- endif -%}
        {%- else -%}
          {%- if section.settings.logo != blank -%}
            <a href="/" itemprop="url" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
              <img src="{{ 'Logo_w.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ shop.name }}" itemprop="logo">
            </a>
          {%- else -%}
            <a href="{{ routes.root_url }}" class="site-header__link site-header__logo-link" itemprop="url">{{ shop.name }}</a>
          {%- endif -%}
        {%- endif -%}

      </div>

 
5 - Change "Logo_w.svg" for the name on your svg file (the one you've uploaded to the assets folder).

6 - If you need to play with the size of the image on your page, go back to your code, and under SECTIONS, you'll have the THEME.CSS.LIQUID

7 - Look for ".site-header__logo". Mine is on line 3408. Play around with the "max-height" value to change size.
(here's mine as an example):

.site-header__logo {
  //remove default margin when this is an <h1> tag
  margin: 20px;

  img {
    max-height: 50px;
    display: block;
    margin: 0 auto;
  }

[achoo2]

Hi @PauloL 

thanks for that, however, I was looking to code the logo (could be PNG or SVG) on top of my existing slider, 

so basically code a fixed logo on top of the video slider as an overlay (where the red box is) 

[PauloL]

Can you tell me what theme are you using?