Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1041024

    Hi!

    Right now my mobile menu’s social media icons are lined up vertically in a row. I would like to line them up horizontally in one or two rows and make them much smaller. How can i do this?

    The current code that i used to add the icons to the burger menu is in functions.php:

    // add social icons inside the mobile menu
    function ava_custom_script_mod_social(){
    ?>
    <script>
    (function($){
    var int = ”;
    function a() {
    var isMobile = $(‘.av-burger-menu-main’).css(‘display’),
    htmlString = $(‘#header_main .social_bookmarks’).find(‘li a’),
    mobileMenu = $(‘.av-burger-overlay’),
    socialString = [];

    if(isMobile == ‘none’) return;
    if($(‘.burger-social’).length) clearInterval(int);

    htmlString.each(function() {
    var socialClass = $(this).parent(‘li’).attr(‘class’),
    socialItems = $(this).wrap(‘<li class=”‘+ socialClass + ‘ av-active-burger-items burger-social”></div>’).parent().unwrap();
    socialString.push(socialItems);
    });

    $(socialString).each(function() {
    $(this).prependTo(‘#av-burger-menu-ul’);
    });
    }

    $(‘#header’).on(‘mousedown’, ‘.av-main-nav-wrap’, function() {
    int = setInterval(function() {
    a();
    }, 500);
    });

    })(jQuery);
    </script>

    #1041029

    Hey hellomerilou,

    Add this to quick css:

    #top #wrap_all #av-burger-menu-ul li.av-active-burger-items.burger-social{
    display:inline!important;
    float:left!important;
    width:20%!important;
    }

    Best regards,
    Jordan Shannon

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.