social media icons in mobile menu

Oops — thanks, guys! I couldn’t even see them on my phone, but once I saw the screenshot from Guenni, I found them on my emulator, in tablet view.

And yeah, I think you’re right, Guenni, about wrapping them in an li. And I’d like to keep them in the top strip, on desktop — so, thanks, Mike, I don’t think I want them in the main header area on this site, but I’ll keep your solution in mind if I do!

So I went with Guenni’s code using the socket socials, but they were still showing at the left edge of my mobile overlay menu. I was able to center them by changing isHeading=”Social Bookmarks” in the php to isHeading=”” (deleting that whole line seemed to vanish the icons), and setting the css to width=”fit-content”; margin: auto; — so here’s my code, if it helps anyone else.

Thanks again, guys!!!

<?php
function social_footer_icons_to_hamburger_menu(){
?>
<script>
(function($){

  $('#header').one('click', '.av-main-nav-wrap', function() {
    var isMobile  = $('.av-burger-menu-main').css('display'),
      isHeading = "",
      social    = $('#socket .social_bookmarks').clone(true).addClass('sub-menu').css('display','block'),
      mobileMenu  = $('.av-burger-overlay');

    mobileMenu.find('#av-burger-menu-ul').append('<li class="menu-item-social av-active-burger-items" role="menuitem"><span class="avia-menu-text">'+isHeading+'</span></li>');

    if( social.length ){
      mobileMenu.find('.menu-item-social').append(social);
    }
  });

})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'social_footer_icons_to_hamburger_menu');

And then this css seems to work for me:

.html_av-overlay-full #av-burger-menu-ul li.menu-item-social {
    width: fit-content;
    margin: 30px auto;
}
.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.menu-item-social li {
    font-size: 1em;
	margin: 5px;
}

Sorry, Guenni, did it sound like I was still having trouble? I think I’m all set on this — I’m keeping the socials in the top strip on desktop, and your code helped me add them to the mobile menu, for when they disappear from the header on mobile. Thanks again for your help!

Thanks, Mike, but I’m using the Full Page Overlay Menu, where the menu items are centered. I wanted to center the social icons, like all the other menu items, and the quickest way I could find to do that was to change the width of the list item containing the social icons ul from 100% to fit-content, and then set the margins to auto. But that “Social Bookmarks” text (even though it wasn’t showing on the front end) was adding a bunch of width to the list item, preventing me from perfectly centering the icons. Removing that text from the php code solved the problem. Does that make sense now?

Ah, good to know, Guenni — thank you. I set the width to a pixel value instead. But I’m not sure what you’re saying about the heading — is not having a heading an accessibility issue or something?