-
AuthorPosts
-
August 27, 2016 at 4:25 pm #678435
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
but it isn’t doing it. Is this possible?
many thanks
Peter
August 28, 2016 at 1:17 pm #678622Hey 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,
VinayAugust 29, 2016 at 12:57 am #678711Hi 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 #680489September 1, 2016 at 9:28 am #680567Hi,
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,
VinaySeptember 1, 2016 at 5:12 pm #680861Hi 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 #680936Hi,
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,
VinaySeptember 1, 2016 at 10:19 pm #681000Hi Vinay
That is brilliant, thanks so much.
Peter
September 3, 2016 at 5:56 am #681526Hi Peter,
Great, glad we could help :-)
Please let us know if you should need any further help on the topic.
Regards,
RikardJune 9, 2020 at 12:01 am #1220688Hello!
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 #1220689Hi,
Please provide a link to your site and admin info in the private area so we can look into this further.
Best regards,
Jordan ShannonJune 9, 2020 at 12:32 am #1220691Here is my info. Thanks!
June 16, 2020 at 9:43 am #1222941Hi,
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,
IsmaelJune 21, 2020 at 11:03 pm #1224448It’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 #1224680Hey ashley_carloni,
So your issue has been resolved?
Best regards,
Jordan ShannonJune 24, 2020 at 8:30 pm #1225340No. 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 #1225778Hi,
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,
IsmaelJune 26, 2020 at 2:02 pm #1225808i 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)
see test page: https://webers-testseite.de/pureinstall/
- This reply was modified 4 years, 6 months ago by Guenni007.
June 26, 2020 at 7:14 pm #1225969Thank 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 #1226347Hi,
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,
IsmaelJuly 3, 2020 at 10:53 pm #1227841Thank you so much!!
July 3, 2020 at 11:46 pm #1227843Hey ashley_carloni,
I’m glad Ismael was able to help! Should you need additional help, please let us know further.
Best regards,
Jordan ShannonMay 6, 2021 at 5:28 pm #1298845Hey 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 #1299215Hi,
@hacart: Please continue here: https://kriesi.at/support/topic/hide-social-icons-in-main-menu-of-desktop-version/#post-1297754Best regards,
IsmaelJune 7, 2021 at 6:54 pm #1304469Hey 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 -
AuthorPosts
- The topic ‘Social icon in mobile menu’ is closed to new replies.