Burger menu styling

Hey jorisbl,

Thank you for the inquiry.

Have you started with the modifications? We have to check the actual site first and see the current layout in order to provide the necessary code or changes for the mobile menu.

To add or move the social icons inside the mobile menu, please implement the script from the following thread.

// https://kriesi.at/support/topic/social-icon-in-mobile-menu/#post-1226347

Best regards,
Ismael

Hi,

Thanks for the update. Let’s try to deal with one problem at a time, did you try adding the code Ismael linked to? If you are having problems with that, then please give us access to the site in question, so that we can have a closer look.

Best regards,
Rikard

Hi,

Thanks for the update. What kind of problems did you run into? Where can we see the results you are getting?

Best regards,
Rikard

Hi,

Thank you for the info.

The script that we provided in the previous thread will move the social icons inside the mobile menu, but since the social icons are not yet enabled in your site, the script has nothing to move.

Please enable the social icons in the Enfold > Header > Extra Elements panel, then test it again. We can add a few css if you want the social icon to only display inside the mobile menu.

Best regards,
Ismael

Hi,

To hide the social icons beside the menu, please use this css code.

.avia-menu + .social_bookmarks {
    opacity: 0;
}

We edited the script a bit. Please try this one instead.

// move social icons inside icon or mobile menu
function ava_custom_script_mod_social()
{
?>
	<script>
		(function($) {
			$(document).ready(function() {
				var burger_wrap = $('.av-burger-menu-main a');
				var social = $('.social_bookmarks');
				
				$(burger_wrap).on('avia_burger_list_created', function() {
					setTimeout(() => {
						social.appendTo('#av-burger-menu-ul').addClass("mobile_social_bookmarks");
					}, 150);	
				});
			});
		})(jQuery);
	</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod_social', 10000);

Best regards,
Ismael