Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1061070

    Hi,

    I am looking to add social media icons inside the mobile menu. By following this thread I sort of achieved what I wanted.
    However, the icons are displayed two times each; 2x facebook, 2x instagram. Currently, the site only uses two social media icons instead of the default which seems to be 4. Right now I am hiding two icons with css, but see the screenshot in private content to see how it looks like without hiding two icons.

    Now the question: How can we modify the following php code so only two social media icons are displayed?

    // 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).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_social');
    
    #1062418

    Hey P3T3R_0ne,
    Sorry for the late reply, I tested the code above on my localhost and didn’t get double the social icons, so I checked you site and found that this happens only on the one post “Food Sharing” because it has the social icons after the post.
    So I was able to fix this by adding “:first” to the social_bookmarks class
    Please clear your browser cache and check.

    Should anyone else have this issue, here is the corrected code:

    // 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: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', 'ava_custom_script_mod_social');

    Best regards,
    Mike

    #1062684

    Hi Mike,

    thank you for investigating. There are no double social media icons anymore. Thank you for helping out.

    Best regards,
    peter

    #1062938

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Social Media Icons in Mobile Menu’ is closed to new replies.