Hello

Try also adding the following to he Custom CSS field of your templates parameters...

#socialmedia ul li a, #socialmedia ul li a:hover {

    background-position: 0 2px !important;

}

Ciarán

Thank you so much, it worked! However, now the social icons are the same size which looks very odd. I have used the following code and it has worked but the the images on the icons are out of the alignment. Please tell me how I can align them in the center again.
Thank you!

#socialmedia ul li a {

  width: 40px;

  height: 40px;

}

URL: http://192.185.154.195/~kopras/

Hi Saeed

Add the following to the Custom CSS field of your templates parameters. This will reduce your menu height to 45px (default 50px)...

#container_hornav .wrapper960 {

    height: 45px;

}

#hornav > ul > li > a {

    padding: 10px 20px;

}

#hornav .menu li [class^="fa-"]:before, #hornav .menu li [class*=" fa-"]:before {

    top: 13px;

}

Ciarán