Add social icons

You can add social icons to your vertical menu's top or bottom module position.


Social icons

Create a custom HTML module

The first step to embed the social icons to the vertical menu is to create a Custom HTML module.

You should add this module to the sm-bottom or sm-top module position depending on where you want to place it.


Module positions

After that steps you should copy this code to your Custom HTML module, but you should edit the attributes, hrefs and paths according to your page.

This is an example solution for the social icons, which based on the above images. You can customize it. 

<style scoped="scoped">
  a.social{
    width:48px;
    height:48px;
    margin-left:20px;
    background-color:#444;
    display:block;
    float:left;
    cursor:pointer;
  }
  a.social-fb{background: transparent url("/images/social-sprite.png") 0 0 no-repeat}
  a.social-tw{background: transparent url("/images/social-sprite.png") -50px 0 no-repeat}
  a.social-yt{background: transparent url("/images/social-sprite.png") -100px 0 no-repeat}
  a.social-dr{background: transparent url("/images/social-sprite.png") -150px 0 no-repeat}  
  a.social-fb:hover{background-position: 0 -50px}
  a.social-tw:hover{background-position: -50px -50px}
  a.social-yt:hover{background-position: -100px -50px}
  a.social-dr:hover{background-position: -150px -50px}
</style>

<div>
  <div class="header" style="margin-top:30px; width:100%; background-color:#349fad; color:white; text-align:center; line-height:36px; font-size:15px; font-weight:normal;">
    Find us on social networks
  </div>
  <div style="margin-top:20px; width:100%;">
    <a class="social social-fb" href="https://www.facebook.com/Offlajn" target="_blank"></a>
    <a class="social social-tw" href="https://twitter.com/OfflajnOfficial" target="_blank"></a>
    <a class="social social-yt" href="https://www.youtube.com/channel/UCavIJLOlBgTI9iZ3mNXoTMg" target="_blank"></a>
    <a class="social social-dr" href="http://dribbble.com" target="_blank"></a>
  </div>
</div>