Adding social icons to mobile header

Hi, I am trying to add the social icons to the header area for mobile, since we don’t need to use the menu. I have followed the instructions from this post: https://kriesi.at/support/topic/how-do-i-part-2/#post-452123 and it works except for iPad in vertical position. Maybe I need more coffee, but I’m not seeing why it doesn’t work for that browser size?

This was the instructions from that post…

In functions.php for the child theme:

function attach_social_icons_to_mobile_menu(){
?>
<script>
(function($){
    $(window).load(function() {
    		var social_buttons 		= $("#header").find('ul.social_bookmarks').clone(),
    			mobile_advanced 	= $("#mobile-advanced");

			mobile_advanced.prepend(social_buttons);
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'attach_social_icons_to_mobile_menu');  

And in the style:

#mobile-advanced ul.social_bookmarks {
    display: block !important;
    position: absolute;
    top: 0;
    left: 25px;
    top: 25px;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a {
    clear: none;
    width: 40px;
    min-height: 40px;
    line-height: 40px;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a{
    border: 0 !important;
}

#mobile-advanced ul.social_bookmarks li > a:before{
    content: attr(data-av_icon);
    position: relative;
    top: auto;
    font-size: 22px;
    margin-left: 0;
}

Thanks for any thoughts!