Tagged: icons, menu, mobile, social icons, social media
-
AuthorPosts
-
February 10, 2017 at 3:44 pm #745459
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 #746980Hey sweet3,
try to follow posts like https://kriesi.at/support/topic/social-icon-in-mobile-menu/
Best regards,
AndyFebruary 15, 2017 at 10:09 am #747391Hi 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, 10 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 #749838Hey!
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,
IsmaelFebruary 24, 2017 at 4:45 am #751216Hi @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 -
AuthorPosts
- The topic ‘Social media icons in mobile menu’ is closed to new replies.