Social Icons are not appearing in Mobile in WordPress 5.3.2

Hey geraldinetay27,
Do you mean that the social icons do not show on mobile? This is the default action of Enfold, to show the social icons in your header on mobile Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block !important; 
}
}

Best regards,
Mike

Hi,
Oh, I see. Try adding this code to the end of your functions.php file in Appearance > Editor:

function ava_custom_script_mod(){
?>
<script>
(function($){
		var int = '';
		function a() {
			var isMobile	 = $('.av-burger-menu-main').css('display'),
				htmlString   = $('#header_main .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('<div 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', 'ava_custom_script_mod');

then add this code in the General Styling > Quick CSS field:

@media only screen and (max-width: 767px) {
.burger-social {
    height: 30px;
    text-align: center;
}
.burger-social {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inline-block !important; 
}
.burger-social a {
    border-bottom: none;
    padding: 0;
}
}

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

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .main_menu {
    right: 50% !important; 
}
}

please adjust the “50%” in the code to suit your needs.
Then clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry I misread your request, I thought you wanted the menu moved over.
So please remove that css and use this instead:

@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks {
    display: block !important; 
}
.main_menu {
	display: flex !important;
	flex-direction: row-reverse !important; 
}
}

I didn’t see a “blue box” in your screenshot but this css does put the social icons before the burger menu.
After applying the css, Please clear your browser cache and check.

Best regards,
Mike