Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    #746980

    Hey sweet3,

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

    Best regards,
    Andy

    #747391

    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, 5 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
    #749838

    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

    #751216

    Hi @Ismael

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

    #751219

    Hi!

    Great! Let us know if you need anything else. :)

    Regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Social media icons in mobile menu’ is closed to new replies.