Phone Number and Social Icons at Mobile Menu - Support | Kriesi.at

Tagged: icons, menu, mobile

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
January 20, 2020 at 12:42 pm #1176264

Vangone
Participant

Hello,

we are Using the Left side menu. We want to add the Phone Number and social Icons at the mobile Menu, is there a way to do this?

Example:

Website:
http://www.neckarglueck.com

Regards,
Phil

January 21, 2020 at 6:46 am #1176579

Jordan Shannon
Inactive Moderator

Hey Vangone,

Refer Mike’s reply here for some direction:

https://kriesi.at/support/topic/social-media-icons-in-mobile-menu-2/

Best regards,
Jordan Shannon

January 21, 2020 at 2:17 pm #1176733
Vangone
Participant
Hi, I tryed following code:
```
// 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');
```
Simply nothing happend exepct some Failures, when moving the Mousewheel.

Any more help`?
January 22, 2020 at 1:23 pm #1177174
Ismael
Moderator
Hi,

Thank you for the update.

The modification is intended for default or top headers, so it’s not going to work on a left/right header. We might be able to make it work by replacing the following line..
```
htmlString   = $('#header_main .social_bookmarks:first').find('li a'),
```
.., with:
```
htmlString   = $('#header_main .av-sidebar-social-container:first').find('li a'),
```
If it didn’t work, post the login details in the private field so that we can test the script. Make sure that the Appearance > Editor panel is accessible.

Best regards,
Ismael
January 22, 2020 at 3:48 pm #1177221

Vangone
Participant

Hi Ismael,

Social Icons now appear but 2 more Questions:

Possible to also Add a Phone Icon with Phone number, and E-Mail Icon with E-Mail adress?
Also Possible to change the Color of the Social Icons and let them appear next to them, instead of under each other?

Regards

January 24, 2020 at 3:15 am #1177963
Ismael
Moderator
Hi,

Thank you for the update.

You can manually insert additional items inside the av-burger-menu-ul container by using the appendTo function or method. Example:
```
$(document).ready(function() {
    $('<li class="phone-number">+01 234 5678 90</li>').appendTo('#av-burger-menu-ul');
});
```
Add the script after the previous one.

Best regards,
Ismael
January 24, 2020 at 11:47 am #1178083

Vangone
Participant

Then I receive an Error.

syntax error, unexpected '(', expecting variable (T_VARIABLE) or '{' or '$'####

Regards

January 27, 2020 at 3:59 am #1178554
Ismael
Moderator
Hi,

Sorry for the delay. Did you add the code right after this line?
```
$('#header').on('mousedown', '.av-main-nav-wrap', function() {
			int = setInterval(function() {
				a();
			}, 500);
		});
```
And please copy it directly from the forum, not from your email.

Best regards,
Ismael
January 29, 2020 at 12:41 pm #1179390

Vangone
Participant

No I didnt, but now I did, Site is working, but no Phone Number appeared.

January 31, 2020 at 9:08 am #1180185
Ismael
Moderator
Hi,

Thank you for the info.

We have to access to the dashboard in order to test the script. We tried using the same login info above to access the dashboard but it only works for htaccess. Please provide an existing user account.

Try to add the line..
```
 $('<li class="phone-number">+01 234 5678 90</li>').appendTo('#av-burger-menu-ul');
```
.. right after this one.
```
$(socialString).each(function() {
					$(this).appendTo('#av-burger-menu-ul');
				});
```
Best regards,
Ismael
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.