Social Icons in Mobile Menu Alignment

Hi – I have used added this code to my function.php file to add social icons to flyout mobile menu – which it did- but I want the icons lined up horizontally across the bottom of the flout menu. I’ve tried several code snippets but am not having any luck. I am using the latest version of Enfold. Thanks of any help you can give! Anna

// 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>
<?php
}
add_action(‘wp_footer’, ‘ava_custom_script_mod_social’);