Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #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

    #678622

    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

    #678711

    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

    #680489

    Hi,

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

    Best regards,
    Ismael

    #680567

    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

    #680861

    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

    #680936

    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

    #681000

    Hi Vinay

    That is brilliant, thanks so much.

    Peter

    #681526

    Hi Peter,

    Great, glad we could help :-)

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

    Regards,
    Rikard

    #1220688

    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

    #1220689

    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

    #1220691

    Here is my info. Thanks!

    #1222941

    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

    #1224448

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

    #1224680

    Hey ashley_carloni,

    So your issue has been resolved?

    Best regards,
    Jordan Shannon

    #1225340

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

    #1225778

    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

    #1225808

    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 10 months, 2 weeks ago by  Guenni007.
    #1225969

    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.

    #1226347

    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

    #1227841

    Thank you so much!!

    #1227843

    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

    #1298845

    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.

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

You must be logged in to reply to this topic.