Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.
Tagged: enfold
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>
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