Categories

Featured templates

Monstroid. How to add Follow Us icons to the header

Guillaume Dumas November 18, 2015
Rating: 5.0/5. From 2 votes.
Please wait...

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

Monstroid. How to add Follow Us icons to the header

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:

Monstroid._How_to_add_Follow_Us_icons_to_the_header-1

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:

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

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

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

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

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-6
  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;
      					}
      				
      Monstroid._How_to_add_Follow_Us_icons_to_the_header-7
  8. Scroll down and click Save Options:

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-8
  9. Reload the page. Now your icons are smaller and positioned to the right:

    Monstroid._How_to_add_Follow_Us_icons_to_the_header-9

Feel free to check the detailed video tutorial below:

Monstroid. How to add Follow Us icons to the header
This entry was posted in Monstroid Tutorials, WordPress Tutorials and tagged follow ua, icon, Monstroid. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket