Mobile Menu Social Media Icons

Hi!

Right now my mobile menu’s social media icons are lined up vertically in a row. I would like to line them up horizontally in one or two rows and make them much smaller. How can i do this?

The current code that i used to add the icons to the burger menu is in functions.php:

// add social icons inside the mobile menu
function ava_custom_script_mod_social(){
?>
<script>
(function($){
var int = ”;
function a() {
var isMobile = $(‘.av-burger-menu-main’).css(‘display’),
htmlString = $(‘#header_main .social_bookmarks’).find(‘li a’),
mobileMenu = $(‘.av-burger-overlay’),
socialString = [];

if(isMobile == ‘none’) return;
if($(‘.burger-social’).length) clearInterval(int);

htmlString.each(function() {
var socialClass = $(this).parent(‘li’).attr(‘class’),
socialItems = $(this).wrap(‘<li class=”‘+ socialClass + ‘ av-active-burger-items burger-social”></div>’).parent().unwrap();
socialString.push(socialItems);
});

$(socialString).each(function() {
$(this).prependTo(‘#av-burger-menu-ul’);
});
}

$(‘#header’).on(‘mousedown’, ‘.av-main-nav-wrap’, function() {
int = setInterval(function() {
a();
}, 500);
});

})(jQuery);
</script>