Social media icons in mobile menu - Support | Kriesi.at

Tagged: icons, menu, mobile, social icons, social media

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

Author

Posts

February 10, 2017 at 3:44 pm #745459

sweet3

Participant

Hello,

Is it possible to have the social media icons show at the top of the mobile menu? In other words, when the “hamburger” menu is opened, there is white space to the left of the ‘x’ mark where I’d like my social media icons to display. Is this possible without heavy customisation?

Thank you!

February 14, 2017 at 4:51 pm #746980

Andy

Inactive Moderator

Hey sweet3,

try to follow posts like https://kriesi.at/support/topic/social-icon-in-mobile-menu/

Best regards,
Andy

February 15, 2017 at 10:09 am #747391

sweet3

Participant

Hi Andy,

Thank you for your response. I followed the instructions on that post and it *almost* works:
– Mobile menu: The social media icons do not appear at the bottom of the main mobile menu. This is where I’d like them to appear.
– Mobile menu: The social media icons do appear at the bottom after opening the last fold-out menu in the main mobile menu.
– Desktop menu: The social media icons do appear on the main desktop view at the bottom of all the drop-down menus on the main menu. I do not want them to appear there.

Please see the link in the private content box below.

FUNCTIONS.PHP:

function mobile_menu_social_icons(){
?>
<script>
jQuery(document).ready(function(){
  var htmlString = jQuery('.social_bookmarks').html(),
  mobileMenu = jQuery('.responsive #header').find('.main_menu ul li:last-child');
  mobileMenu.append('<ul class="noLightbox social_bookmarks">' + htmlString + '</ul>');
});
</script>
<?php
}
add_action('wp_head', 'mobile_menu_social_icons');

STYLE.CSS:

#mobile-advanced .social_bookmarks {
    margin: 30px 0 0 22px!important;
}
#mobile-advanced .social_bookmarks a:before {
    top: 2px!important;
    margin-left: -13px!important;
}
#mobile-advanced [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
}

#top .social_bookmarks li a:before, #mobile-advanced .social_bookmarks li a:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    content: attr(data-av_icon);
    speak: none;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a{
    border:0!important;
}
#mobile-advanced .social_bookmarks li a:before {
    color: #666;
    font-size: 30px!important;
}

#mobile-advanced .social_bookmarks li > a:before {
   font-size: 20px;
}

Thanks for your time!

This reply was modified 7 years, 9 months ago by sweet3. Reason: I noticed that the social icons appear on all drop down menus on the desktop view, not just the last one as originally described. Updated the information accordingly

February 21, 2017 at 9:39 am #749838

Ismael

Moderator

Hey!

Please remove the previous modifications then follow these steps.

1.) Add this code in the functions.php file:

// add social icons inside the mobile menu
function ava_custom_script_mod(){
?>
<script>
(function($){
	function a() {
		var isMobile	 = $('#advanced_menu_toggle').css('display'),
			htmlString   = $('#header .social_bookmarks').find('li a'),
			mobileMenu   = $('#mobile-advanced'),
			socialString = [];

			if(isMobile == 'none') return;

			htmlString.each(function() {
				var socialClass	= $(this).parent('li').attr('class'),
					socialItems = $(this).wrap('<div class="'+ socialClass + '"></div>').parent().unwrap();
				socialString.push(socialItems);
			});

			if($('.social_bookmarks_mod').length == 0) $('<div class="noLightbox social_bookmarks_mod"></div>').prependTo(mobileMenu);

			$(socialString).each(function() {
				$(this).prependTo('.social_bookmarks_mod');
			});
	}

	$(window).on('load resize',function() {
		a();
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');

2.) Add this css code in the Quick CSS field:

#mobile-advanced .social_bookmarks_mod {
    height: 30px;
    text-align: center;
}

#mobile-advanced .social_bookmarks_mod div {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
}

#mobile-advanced .social_bookmarks_mod div a {
    border-bottom: none;
    padding: 0;
}

3.) Remove browser cache or hard refresh before checking the page.

You should see the social icons inside the mobile menu above the menu items.

Best regards,
Ismael

February 24, 2017 at 4:45 am #751216

sweet3

Participant

Hi @Ismael

Wow, that works great! Thank you so much, it’s exactly what I was hoping for :)

February 24, 2017 at 4:47 am #751219

Ismael

Moderator

Hi!