Emoji instagram in the navigation menu

[Wegan]

Hi,

I would like to move the emoticon instagram that is now located on the bottom of my front page, on my navigation menu on the top, right next to "contact" on his right.

I have been founding some solutions that does not work in my case.

My website is wegan.eu.

Thank in advance for your help.

[BSSCommerce-B2B]

Hi @Wegan , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.footer__content-top.page-width {
    display: flex !important;
    flex-direction: row !important;
}
.footer-block--newsletter {
    align-items: flex-start !important;
    margin-top: -10px !important;
    margin-left: 10px !important;
}

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[Wegan]

Thank you very much.

I am sorry i said myself wrong, I want to move it next this contact, on my navigation menu on the top  (see on the screenshot) :

[BSSCommerce-B2B · Accepted solution]

Dear my friend @Wegan ,

Thank you for share with us exactly details of your issue with screenshot. 

I suggest this way to solve this problem.

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this code snippet before tag </head> or </body>: 

<script>
const ulElement = document.querySelector('.list-menu.list-menu--inline');

const newLi = document.createElement('li');
newLi.classList.add('list-social__item');
newLi.innerHTML = `
  <a href="https://www.instagram.com/wegan_official/" class="link list-social__link">
    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-instagram" viewBox="0 0 18 18">
      <path fill="currentColor" d="M8.77 1.58c2.34 0 2.62.01 3.54.05.86.04 1.32.18 1.63.3.41.17.7.35 1.01.66.3.3.5.6.65 1 .12.32.27.78.3 1.64.05.92.06 1.2.06 3.54s-.01 2.62-.05 3.54a4.79 4.79 0 01-.3 1.63c-.17.41-.35.7-.66 1.01-.3.3-.6.5-1.01.66-.31.12-.77.26-1.63.3-.92.04-1.2.05-3.54.05s-2.62 0-3.55-.05a4.79 4.79 0 01-1.62-.3c-.42-.16-.7-.35-1.01-.66-.31-.3-.5-.6-.66-1a4.87 4.87 0 01-.3-1.64c-.04-.92-.05-1.2-.05-3.54s0-2.62.05-3.54c.04-.86.18-1.32.3-1.63.16-.41.35-.7.66-1.01.3-.3.6-.5 1-.65.32-.12.78-.27 1.63-.3.93-.05 1.2-.06 3.55-.06zm0-1.58C6.39 0 6.09.01 5.15.05c-.93.04-1.57.2-2.13.4-.57.23-1.06.54-1.55 1.02C1 1.96.7 2.45.46 3.02c-.22.56-.37 1.2-.4 2.13C0 6.1 0 6.4 0 8.77s.01 2.68.05 3.61c.04.94.2 1.57.4 2.13.23.58.54 1.07 1.02 1.56.49.48.98.78 1.55 1.01.56.22 1.2.37 2.13.4.94.05 1.24.06 3.62.06 2.39 0 2.68-.01 3.62-.05.93-.04 1.57-.2 2.13-.41a4.27 4.27 0 001.55-1.01c.49-.49.79-.98 1.01-1.56.22-.55.37-1.19.41-2.13.04-.93.05-1.23.05-3.61 0-2.39 0-2.68-.05-3.62a6.47 6.47 0 00-.4-2.13 4.27 4.27 0 00-1.02-1.55A4.35 4.35 0 0014.52.46a6.43 6.43 0 00-2.13-.41A69 69 0 008.77 0z"></path>
      <path fill="currentColor" d="M8.8 4a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm0 7.43a2.92 2.92 0 110-5.85 2.92 2.92 0 010 5.85zM13.43 5a1.05 1.05 0 100-2.1 1.05 1.05 0 000 2.1z"></path>
    </svg>
    <span class="visually-hidden">Instagram</span>
  </a>
`;

ulElement.appendChild(newLi);
</script>

Step 3: Save and reload page:

The result will be: 

😍 It's such my honor to help you, bro.

I hope these instructions will help you. If they are helpful, please give us some likes and mark as the solution.

This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

Thanks in advance.

[Wegan]

It worked,

thank you very much for your help!

[BSSCommerce-B2B]

Dear my friend @Wegan ,

We're happy to see that our suggestion helped you solve the issue.

Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.

Have a nice day!