Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #745459


    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!


    Hey sweet3,

    try to follow posts like

    Best regards,


    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.


    function mobile_menu_social_icons(){
      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>');
    add_action('wp_head', 'mobile_menu_social_icons');


    #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{
    #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


    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(){
    	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();
    			if($('.social_bookmarks_mod').length == 0) $('<div class="noLightbox social_bookmarks_mod"></div>').prependTo(mobileMenu);
    			$(socialString).each(function() {
    	$(window).on('load resize',function() {
    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,


    Hi @Ismael

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



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


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