Add social icons to mobile menu

Hey michelleornest,
Thank you for the link to your site, I see that you are using Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Header Social Icons ▸ Display in top bar at the right for this option try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function add_social_icons_mobile_menu(){
?>
<script>
(function($){
	var int = '';
	function a() {
		var isMobile	 = $('.av-burger-menu-main').css('display'),
			htmlString   = $('#header_meta .social_bookmarks:first').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).appendTo('#av-burger-menu-ul');
			});
	}

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

})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_social_icons_mobile_menu');

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#av-burger-menu-ul li.burger-social {
    float: left;
}
#av-burger-menu-ul li.burger-social a {
    padding: 10px !important;
    border-bottom: none !important;
}
#av-burger-menu-ul li.social_icon_1 {
 padding-left: 40px
}

Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike