Social icon in mobile menu - Support | Kriesi.at

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

Author

Posts
August 27, 2016 at 4:25 pm #678435

envapk2
Participant

Hi

I want to make the social icon appear in the mobil slide-out menu, as in this image

http://www.peterk2.com/menuWithTwitter.jpg

I have looked at this from the forum

Social Icons in Mobile Slide-out Menu

but it isn’t doing it. Is this possible?

many thanks

Peter

August 28, 2016 at 1:17 pm #678622
Vinay
Inactive Moderator
Hey envapk2,

Please try adding this at the very end of your themes / child themes functions.php file:
```
function mobile_menu_social_icons(){
?>
<script>
jQuery(document).ready(function(){
  var htmlString = jQuery('.social_bookmarks').html(),
  mobileMenu = jQuery('#mobile-advanced');
  mobileMenu.prepend('<ul class="noLightbox social_bookmarks">' + htmlString + '</ul>');
  console.log('<ul class="noLightbox social_bookmarks">' + htmlString + '</ul>');
});
</script>
<?php
}
add_action('wp_head', 'mobile_menu_social_icons');
```
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
/* Mobile menu social icons */

#mobile-advanced [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
}

#top .social_bookmarks li a:before, #mobile-advanced .social_bookmarks li a:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    content: attr(data-av_icon);
    speak: none;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a{
    border:0!important;
}
#mobile-advanced .social_bookmarks li a:before {
    color: #666;
    font-size: 30px!important;
}

#mobile-advanced .social_bookmarks li > a:before {
   font-size: 20px;
}
```
If you still have any issues please post us your login credentials (in the “private data” field), so we can take a look at your backend.

Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Vinay
August 29, 2016 at 12:57 am #678711

envapk2
Participant

Hi Vinay

I tried that but no social icon is appearing in the mobile menu. I have attached login details. Deactivate any plugins if necessary

many thanks

Peter

September 1, 2016 at 6:27 am #680489

Ismael
Moderator

Hi,

We modified the code a bit. Please check it now.

Best regards,
Ismael

September 1, 2016 at 9:28 am #680567
Vinay
Inactive Moderator
Hi,

I can see the social icons active in the mobile menu. Please check the attached screenshot and if you do not see the same go ahead and refresh the browser cache.

I have added the below css to fine tune the social icon.
```
#top .social_bookmarks {
    margin: 0 0 0 22px!important;
}
.social_bookmarks a:before {
    top: 2px!important;
    margin-left: -13px!important;
}
```
Best regards,
Vinay
September 1, 2016 at 5:12 pm #680861

envapk2
Participant

Hi Vinay

That nearly works, but is it possible to have the icon appear at the end of the menu list rather than at the top? Also, now in the desktop menu the social icon has shifted position and the twitter bird is not in the centre of the background.

many thanks

Peter

September 1, 2016 at 8:11 pm #680936
Vinay
Inactive Moderator
Hi,

We have modified the code in functions.php please review the site now.
```
function mobile_menu_social_icons(){
?>
<script>
jQuery(document).ready(function(){
  var htmlString = jQuery('.social_bookmarks').html(),
  mobileMenu = jQuery('.responsive #header').find('.main_menu ul li:last-child');
  mobileMenu.append('<ul class="noLightbox social_bookmarks">' + htmlString + '</ul>');
});
</script>
<?php
}
add_action('wp_head', 'mobile_menu_social_icons');
```
And the CSS for it as below
```
#mobile-advanced .social_bookmarks {
    margin: 30px 0 0 22px!important;
}
#mobile-advanced .social_bookmarks a:before {
    top: 2px!important;
    margin-left: -13px!important;
}
#mobile-advanced [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
}

#top .social_bookmarks li a:before, #mobile-advanced .social_bookmarks li a:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    content: attr(data-av_icon);
    speak: none;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a{
    border:0!important;
}
#mobile-advanced .social_bookmarks li a:before {
    color: #666;
    font-size: 30px!important;
}

#mobile-advanced .social_bookmarks li > a:before {
   font-size: 20px;
}
```
Let us know if you have any questions.

Best regards,
Vinay
September 1, 2016 at 10:19 pm #681000

envapk2
Participant

Hi Vinay

That is brilliant, thanks so much.

Peter

September 3, 2016 at 5:56 am #681526

Rikard
Keymaster

Hi Peter,

Great, glad we could help :-)

Please let us know if you should need any further help on the topic.

Regards,
Rikard

June 9, 2020 at 12:01 am #1220688

ashley_carloni
Participant

Hello!

I am looking to add the social icons to my mobile menu. The solution posted above on 9/01/2016 did not work for me. Is there updated code I can use?

My site is horizoneventgroup.com

June 9, 2020 at 12:24 am #1220689

Jordan Shannon
Inactive Moderator

Hi,

Please provide a link to your site and admin info in the private area so we can look into this further.

Best regards,
Jordan Shannon

June 9, 2020 at 12:32 am #1220691

ashley_carloni
Participant

Here is my info. Thanks!

June 16, 2020 at 9:43 am #1222941
Ismael
Moderator
Hi,

Sorry for the late reply. You can use this new script to move the social icons inside the 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');
				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);
```
You might need to add a few css modifications.

Best regards,
Ismael
June 21, 2020 at 11:03 pm #1224448

ashley_carloni
Participant

It’s no problem! I added the new code and I don’t see them on the mobile menu mobile.

June 22, 2020 at 7:23 pm #1224680

Jordan Shannon
Inactive Moderator

Hey ashley_carloni,

So your issue has been resolved?

Best regards,
Jordan Shannon

June 24, 2020 at 8:30 pm #1225340

ashley_carloni
Participant

No. The code doesn’t seem to be working. I do not see the icons on the mobile menu.

June 26, 2020 at 11:58 am #1225778

Ismael
Moderator

Hi,

Did you enable the social icons from the Header > Extra Elements > Header Social Icons settings? The icons should be available in the page so that the script can move them inside the mobile menu. We tried to login to the site but the previous account is not valid.

Best regards,
Ismael

June 26, 2020 at 2:02 pm #1225808
Guenni007
Participant
i use for it the socket social icons . They had to be activated ! as Ismael too mentioned for the other solution!
if you want to see social icons in the socket as well – remove the line in the snippet that sets it to display : none
$('#socket .social_bookmarks').css({ 'display': 'none' });

( but they had to be in the DOM)

https://kriesi.at/support/topic/logo-oben-navigation-darunter-links-und-social-icons-rechts/#post-1204870

see test page: https://webers-testseite.de/pureinstall/
- This reply was modified 4 years, 5 months ago by Guenni007.
June 26, 2020 at 7:14 pm #1225969

ashley_carloni
Participant

Thank you for your input. I have ‘Display in main header area’ enabled for ‘Header Social Icons’. Is that correct? I have updated the login info and included it in the private, if you’d like to take a look.

June 29, 2020 at 10:37 am #1226347
Ismael
Moderator
Hi,

We modified the script in the functions.php file a bit.
```
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);
```
And added this css code to adjust the position of the social icons.
```
.html_av-overlay-side #top #wrap_all .av-burger-overlay .social_bookmarks {
	position: relative;
	top: 100px;
	left: 60px;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay .social_bookmarks a {
	padding: 0;
}
```
Screenshot: https://imgur.com/a/1DZciIs
Best regards,
Ismael
July 3, 2020 at 10:53 pm #1227841

ashley_carloni
Participant

Thank you so much!!

July 3, 2020 at 11:46 pm #1227843

Jordan Shannon
Inactive Moderator

Hey ashley_carloni,

I’m glad Ismael was able to help! Should you need additional help, please let us know further.

Best regards,
Jordan Shannon

May 6, 2021 at 5:28 pm #1298845

hacart
Participant

Hey everyone,

I’ve tested such code on 4 different installations unsuccessfully so I’ve decided to use the old one which for one site did apply without any issues, but for the rest, I’ve resorted to CSS ticks provided by you Kriesi crew and to this date it’s still having problems. The links are not positioned correctly into each icon. As a particularity, the only site where this old code worked properly has the social icons activated on the secondary menu above the main one. I guess the inconvenience is directly related to this choice?

Regards.

May 10, 2021 at 5:01 am #1299215

Ismael
Moderator

Hi,

@hacart: Please continue here: https://kriesi.at/support/topic/hide-social-icons-in-main-menu-of-desktop-version/#post-1297754

Best regards,
Ismael

June 7, 2021 at 6:54 pm #1304469

hacart
Participant

Hey everyone,

Here I am again.
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?

Regards,

HC

June 9, 2021 at 8:43 am #1304809

Ismael
Moderator

Hi,

@hacart: Please create a new thread and post the login detail in the private field so that we could check the issue properly. We will close this thread for now.

Best regards,
Ismael
Author

Posts

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

The topic ‘Social icon in mobile menu’ is closed to new replies.