---

Step 1. ​open Weebly's HTML/CSS Editor

​​Click on "THEME" at the top, then click on "Edit HTML/CSS" on the left.

---

Step 2. Add hTML code

On the left under "HEADER TYPE", select "header.html", and on the right, add the HTML code "<div class="social">{social}</div>" directly beneath the white "{menu}" code as shown below in orange:

<div class="nav-wrap">
    <div class="container">
        <div class="nav desktop-nav">{menu}</div>
        <div class="social">{social}</div>
    </div><!-- end .container -->
</div><!-- end .nav-wrap -->

Note: Repeat this process for the "no-header.html" page layout

---

Step 3. Add cSS coding

On the left under "STYLES", click on "main.less", and on the right, scroll down to the navigation coding. Add the codes below to the CSS file, in the vicinity of the other navigation coding.

.nav-wrap .container {
  display:table;
  width:100%;
  max-width:1115px;
}
.nav,
.social {
  display:table-cell;
  vertical-align:middle;
}
.social {
  padding-right:15px;
}
.social > div {
  text-align: right !important;
}
@media screen and (max-width:767px) {
  .social {
    display:none;
  }
}

---

Step 4. alter cSS code

While still in the CSS file, find the code below and change it to "text-align:left;" as shown below in orange:

​.nav {
  text-align: left;
}

Click save.

---

Step 5. add social media links

Once you're back in the Weebly editor, you should see the default social media icons element appear to the right of the navigation. Simply click on it to begin adding your site's social media icons.

Note: Don't worry if the social media icons aren't aligned all the way to the right. Once the site is live, the browser will interpret the coding we added in Step 3 correctly. Unfortunately, the Weebly editor doesn't always work like a browser.

---

You're done! Publish your site to see your new social media icons!

---

Tips and additional information

To have your social media icons automatically appear in your mobile navigation, head back into the "HTML/CSS Editor", click on "header.html", scroll down and add the code "<div class="social-mobile">{social}</div>" to the code below as shown in orange:

<div class="nav mobile-nav">
    {menu}
    <div class="social-mobile">{social}</div>
</div>

Note: You will need to repeat this process for the "no-header.html" page layout as well.

Now click on "main.less" and add the CSS code below to the CSS codes we added in Step 3 as shown below in orange:

​...
​@media screen and (max-width:767px) {
    .social {
        display:none;
    }
    .social-mobile > div {
        text-align:center!important;
    }
}

---

comments powered by Disqus