Moving social icons next to search in Dawn

[Bird_on_a_Wire]

Hello, 

I need some help with my social buttons, please!

Two problems. First, I added my social buttons to my header by inserting this code at the end of my header.liquid file, but they are in the wrong position- they need to be next to the search button rather (see screenshot) 

<ul class="list list-social list-unstyled" role="list">

{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_instagram_link }}" class="list-social__link link">
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
{%- render 'icon-tumblr' -%}
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
</a>
</li>
{%- endif -%}

Screenshot of the preferred position for socials 

Then the second issue: I replaced the timber logo with a custom Artsy logo but if you watch the below screen grab- you will see that every time a new page loads the logo flashes large towards the top left of the screen for some reason. How can I stop this?

SITE: https://e1c8d3.myshopify.com/collections/kimathi-mafafo-1985 

PASSWORD: thaits 

Thanks in advance for any help!

[harivishwakarma · Accepted solution]

Hello @Bird_on_a_Wire 

Goto header.liquid file and find this code ( header__icons) and paste your code ( see image)

[oscprofessional]

@Bird_on_a_Wire 

Paste that code in this div. (header-icon)

[Ujjaval]

@Bird_on_a_Wire 
in header.liquid 
Find below line 

<div class="header__icons">

and put your code below of that line 

[harivishwakarma · Accepted solution]

Hello @Bird_on_a_Wire 

Goto header.liquid file and find this code ( header__icons) and paste your code ( see image)

[Bird_on_a_Wire]

Thank you @harivishwakarma  ,  @oscprofessional & @Ujjaval  your suggestions have all worked, the icons are in the correct place! 

My only issue now is that the icon is still flashing very large when new pages load- see the screenshot below. 

Do I need to fix something in my icon-tumblr.liquid file? Code below 

{% comment %} 

OLD TUMBLER SVG 

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-tumblr" viewBox="0 0 91 161">
  <path fill-rule="evenodd" d="M64 160.3c-24 0-42-12.3-42-41.8V71.3H.3V45.7c24-6.2 34-26.9 35.2-44.7h24.9v40.5h29v29.8h-29v41.1c0 12.3 6.2 16.6 16.1 16.6h14v31.3H64" fill="currentColor">
</svg> 

NEW SVG BELOW
{% endcomment %}

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="auto" height="auto" viewBox="0 0 240.000000 240.000000"
 preserveAspectRatio="xMidYMid meet" class=icon>

<g transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M135 2258 c-3 -7 -4 -488 -3 -1068 l3 -1055 1065 0 1065 0 0 1065 0
1065 -1063 3 c-845 2 -1064 0 -1067 -10z m1975 -1058 l0 -910 -160 0 -160 0 0
210 0 210 -75 0 -75 0 0 -210 0 -210 -675 0 -675 0 0 910 0 910 910 0 910 0 0
-910z"/>
<path d="M672 1498 c-84 -216 -152 -396 -152 -400 0 -5 35 -8 78 -8 l77 0 40
108 40 107 155 0 155 0 39 -107 39 -108 79 0 c43 0 78 3 78 8 0 4 -69 184
-152 400 l-153 392 -86 0 -86 0 -151 -392z m282 93 c25 -69 46 -129 46 -133 0
-4 -45 -8 -101 -8 -92 0 -101 2 -94 18 6 15 61 161 87 231 5 13 10 22 12 20 2
-2 25 -60 50 -128z"/>
</g>
</svg>

[oscprofessional · Accepted solution]

@Bird_on_a_Wire 

ul.list.list-social.list-unstyled {
    height: 44px;
    overflow: hidden;
}
body .list-social__item svg {
    height: 1.8rem;
    width: 1.8rem;
    overflow: hidden;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

[Bird_on_a_Wire]

Thank you @oscprofessional all fixed!