Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1306256

    Hi there,

    I’ve literally copied the code that works for 2 Enfold installations (both, function.php and CSS), but haven’t been able to make the slide-out mobile menu show the social icons. Can you pls check it out to guide me on what might be causing the problem?

    // 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:first’).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).appendTo(‘#av-burger-menu-ul’);
    });
    }

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

    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘ava_custom_script_mod_social’);

    I’ve also added the corresponding CSS code.

    I’ve tried this code without any result:

    function ava_custom_script_mod_social()
    {
    ?>
    <script>
    (function($) {
    $(document).ready(function() {
    var burger_wrap = $(‘.av-burger-menu-main a’);
    var social = $(‘.social_bookmarks’);
    var mobile_social = $(‘.mobile_social_bookmarks’).length;

    if (mobile_social) return;

    $(burger_wrap).on(‘avia_burger_list_created’, function() {
    setTimeout(() => {
    social.appendTo(‘#av-burger-menu-ul’).addClass(“mobile_social_bookmarks”);
    }, 500);
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘ava_custom_script_mod_social’, 10000);

    Any other suggestions, please?

    Regards,

    HC

    • This topic was modified 3 years, 5 months ago by hacart.
    #1306524

    Hey Harold,
    Thank you for your patience, and for the link to your site, the reason the script is not working is because the social icons are not in the main menu as expected, they are in the topbar, so to correct please remove your other scripts and use this instead:

    function savvy_custom_mod_social(){
    ?>
    <script>
    (function($){
          var int = '';
          function a() {
              var isMobile	 = $('.av-burger-menu-main').css('display'),
                  htmlString   = $('#header_meta .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).appendTo('#av-burger-menu-ul');
                  });
          }
      
          $('#header').on('mousedown', '.av-main-nav-wrap', function() {
              int = setInterval(function() {
                  a();
              }, 500);
          });
      
      })(jQuery);
      </script>
    <?php
    }
    add_action('wp_footer', 'savvy_custom_mod_social');

    Best regards,
    Mike

    #1306541

    It works now.
    Thanks a lot, Mike!

    In case somebody else implements the code, you’ll also need to add this CSS:

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

    And to correct some link misadjustment that occurred when social icons finally show up, this is the CSS rule:

    #top #wrap_all #av-burger-menu-ul li.av-active-burger-items.burger-social a {
    padding: 0;
    }

    #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.social_icon_1 {
    margin-left: 50px;
    }

    Best regards,

    HC

    #1306561

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Social icons in mobile menu won't work with same code’ is closed to new replies.