Move social icons to header Debut theme

[Madsdiamond]

Hi all,

Please can anyone provide HTML Coding help to move the social media icon buttons to the header?

My site is lagoonbeauty.co.uk & password is lagooncomingsoon

[oscprofessional]

Hi Madsdiamond,

As I can see the social media icon ie: instagram is in the footer so you want to move it from footer to header ok? correct?

[Madsdiamond]

yes thats correctt

[oscprofessional · Accepted solution]

Past this code in header.liquid file

search this  text <div class="site-header__icons-wrapper"> in header file. then past the code in this div

<div class="grid__item one-half small--one-whole site-footer-item-tall"><ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list"><li class="social-icons__item">
                  <a class="social-icons__link" href="http://instagram.com/lagoonbeautyco" aria-describedby="a11y-external-message"><svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram" viewBox="0 0 512 512"><path d="M256 49.5c67.3 0 75.2.3 101.8 1.5 24.6 1.1 37.9 5.2 46.8 8.7 11.8 4.6 20.2 10 29 18.8s14.3 17.2 18.8 29c3.4 8.9 7.6 22.2 8.7 46.8 1.2 26.6 1.5 34.5 1.5 101.8s-.3 75.2-1.5 101.8c-1.1 24.6-5.2 37.9-8.7 46.8-4.6 11.8-10 20.2-18.8 29s-17.2 14.3-29 18.8c-8.9 3.4-22.2 7.6-46.8 8.7-26.6 1.2-34.5 1.5-101.8 1.5s-75.2-.3-101.8-1.5c-24.6-1.1-37.9-5.2-46.8-8.7-11.8-4.6-20.2-10-29-18.8s-14.3-17.2-18.8-29c-3.4-8.9-7.6-22.2-8.7-46.8-1.2-26.6-1.5-34.5-1.5-101.8s.3-75.2 1.5-101.8c1.1-24.6 5.2-37.9 8.7-46.8 4.6-11.8 10-20.2 18.8-29s17.2-14.3 29-18.8c8.9-3.4 22.2-7.6 46.8-8.7 26.6-1.3 34.5-1.5 101.8-1.5m0-45.4c-68.4 0-77 .3-103.9 1.5C125.3 6.8 107 11.1 91 17.3c-16.6 6.4-30.6 15.1-44.6 29.1-14 14-22.6 28.1-29.1 44.6-6.2 16-10.5 34.3-11.7 61.2C4.4 179 4.1 187.6 4.1 256s.3 77 1.5 103.9c1.2 26.8 5.5 45.1 11.7 61.2 6.4 16.6 15.1 30.6 29.1 44.6 14 14 28.1 22.6 44.6 29.1 16 6.2 34.3 10.5 61.2 11.7 26.9 1.2 35.4 1.5 103.9 1.5s77-.3 103.9-1.5c26.8-1.2 45.1-5.5 61.2-11.7 16.6-6.4 30.6-15.1 44.6-29.1 14-14 22.6-28.1 29.1-44.6 6.2-16 10.5-34.3 11.7-61.2 1.2-26.9 1.5-35.4 1.5-103.9s-.3-77-1.5-103.9c-1.2-26.8-5.5-45.1-11.7-61.2-6.4-16.6-15.1-30.6-29.1-44.6-14-14-28.1-22.6-44.6-29.1-16-6.2-34.3-10.5-61.2-11.7-27-1.1-35.6-1.4-104-1.4z"></path><path d="M256 126.6c-71.4 0-129.4 57.9-129.4 129.4s58 129.4 129.4 129.4 129.4-58 129.4-129.4-58-129.4-129.4-129.4zm0 213.4c-46.4 0-84-37.6-84-84s37.6-84 84-84 84 37.6 84 84-37.6 84-84 84z"></path><circle cx="390.5" cy="121.5" r="30.2"></circle></svg><span class="icon__fallback-text">Instagram</span>
                  </a>
                </li></ul></div>

[Madsdiamond]

Thank you, is there a way I can align it with the search bar and shopping cart?

[oscprofessional]

Yes

[oscprofessional]

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

.grid__item.one-half.small--one-whole.site-footer-item-tall {
    position: relative;
    top: 10px;
    right: 12px;
}

[southernmag]

Thank you so much for helping to move their instagram icon! Is there anyway you would help me move my icons instagram, facebook, and pinterest? My site is southernmagnoliaembridery.com

[replayrewind]

Hi!! This worked like a charm to connect my Facebook and Instagram! I don't know how to send the direct link but still wanted to give credit where it is deserved!

12-22-202009:36 AM

 RemoteDev

Explorer

https://flexkitux.com

62 5 10

Hi @Luca1301 

From your Store Admin, go to Online Store -> Themes -> Theme Actions -> Edit Code.

In the online code editor, open sections/header.liquid file.

Search the following line in the file:

<div class="site-header__icons-wrapper">

After this line, add the following code.

<a href="https://facebook.com" class="btn--link site-header__icon">{% render 'icon-facebook' %}</a>

<a href="https://instagram.com" class="btn--link site-header__icon">{% render 'icon-instagram' %}</a>

[replayrewind]

Hi @Luca1301 

From your Store Admin, go to Online Store -> Themes -> Theme Actions -> Edit Code.

In the online code editor, open sections/header.liquid file.

Search the following line in the file:

<div class="site-header__icons-wrapper">

After this line, add the following code.

<a href="https://facebook.com" class="btn--link site-header__icon">{% render 'icon-facebook' %}</a>

<a href="https://instagram.com" class="btn--link site-header__icon">{% render 'icon-instagram' %}</a>