Monstroid. How to add Follow Us icons to the header

This tutorial is going to show you how to add Follow Us icons to the header in the Monstroid theme.

Using the Monstroid theme you can add any number of social icons directly under the main menu. By default, the Header Sidebar area is inactive, so there is nothing under the main menu. We want to show you how to utilize that area:

In order to add Follow Us icons to the header you need to perform the following:

1. Log into your Dashboard. Go to Cherry -> Static Area Builder. Add the Header Sidebar to the Header Top static position:

   

2. Scroll down and click on the Save statics button:

   

3. Go to Appearance -> Widgets. Add the Cherry Follow US widget to the Header Sidebar area:

   

4. Select the networks you would like to be displayed in the header. Click Save:

   

5. Reload the front page of your website. You’ll see the selected networks added right below the logo:

   

6. You can easily change the styling of the added icons. You just need to apply several CSS rules.

7. Go to Cherry -> Options -> General -> User CSS. Use the following CSS rules to change the Follow US icons styling:

   • Reducing the size of the FontAwesome icon:

     					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a i:before {
     					font-size: 20px;
     					}
     				

   • Changing the size of the colored box (by padding):

     					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a {
     					padding: 10px 0px;
     					}
     				

   • Shrinking the width of the colored box and making it float to the right:

     					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item {
     					width: 200px;
     					float: right;
     					}
     				

   • Changing the font-size of the network label:

     					.sidebar-header .cherry-follow_wrap .cherry-follow_list .cherry-follow_item a:after {
     					font-size: 14px;
     					}
     				

     

8. Scroll down and click Save Options:

   

9. Reload the page. Now your icons are smaller and positioned to the right:

   

Feel free to check the detailed video tutorial below: