-
AuthorPosts
-
June 18, 2021 at 2:14 am #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.
June 19, 2021 at 7:29 pm #1306524Hey 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,
MikeJune 20, 2021 at 2:23 am #1306541It 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
June 20, 2021 at 3:07 pm #1306561Hi,
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 -
AuthorPosts
- The topic ‘Social icons in mobile menu won't work with same code’ is closed to new replies.