Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #824634

    Hello,
    I want to show social media icons at the bottom of mobile menu items. I have tried with this solution but it is not showing social media icons in mobile menu. Any further solution? Thanks.

    – Enfold version : 4.1.2
    – WordPress version : 4.8

    #827870

    Hey sakib002001,

    Please provide a link to the site in question so we can look into this further.

    Best regards,
    Jordan Shannon

    #831130
    This reply has been marked as private.
    #831134

    Hi,

    So you want them shown within the menu that flys out from the right side?

    Best regards,
    Jordan Shannon

    #831142

    Yes, exactly. On top of the menu items.

    #831182

    Hi,

    Would you be able to provide both wp-admin and ftp info in the private section so I can begin to work this out.

    Best regards,
    Jordan Shannon

    #832107
    This reply has been marked as private.
    #832438

    Hi,

    Thanks for this. Would you also be able to provide FTP info? This helps in case I need to revert the functions.php file.

    Best regards,
    Jordan Shannon

    #832949
    This reply has been marked as private.
    #835215

    Hi,

    Thank you for the info.

    Please add this code in the Quick CSS field. functions.php file.

    // 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').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).prependTo('#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');
    

    Don’t forget to remove browser cache or hard refresh before checking the page.

    Best regards,
    Ismael

    #883663

    Hi Ismael,

    You say add this to the quick CSS, if we have a child them would this go into the functions.php instead?

    Thanks,

    Dave

    #883891

    Hi Dave,

    Yes, please add the code Ismael gave in functions.php.

    Best regards,
    Nikko

    #942218

    @nikko

    I have added the code Ismael has suggest in my website. (www.u4h.org.uk/home)

    but it is showing the icons as seperate row … but I want all the icons in one row … how can I do that.

    Looking forward to your response.

    #942277

    do this in quick css:
    and have a look:

    #av-burger-menu-ul li.burger-social {
        float: left;
    }
    
    #av-burger-menu-ul li.burger-social a {
        padding: 10px !important;
        border-bottom: none !important;
    }
    
    #av-burger-menu-ul li.social_icon_1 {
     padding-left: 40px
    }

    but i think this looks better if you do not prependTo but apendTo
    here:

    $(socialString).each(function() {
    				$(this).appendTo('#av-burger-menu-ul');
    			});
    #942325

    I have tried both codes …

    the bottom code removes the icons completely and leaves a black hover effect on the menu items.

    The other code has put together the icons at the top but … they don’t look very nice on top and look out of space.

    On your menu at the bottom of menu they look better.

    PS. Why do they go missing when I hover over them.

    Your sample website menu looks slick :)

    #942471

    there must be additional settings concerning to your hover on hamburger menu in your page.

    by the way if there is a prepend ( social_bookmarks on top) then the order is reversed.
    Means on the left there is the last icon and on the right the first :

    So my code above must be changed to the last ( it there are 3 icons ):

    #av-burger-menu-ul li.social_icon_3 {
     padding-left: 40px
    }

    why the first menu point is on the same place i will have a look – but i guess it maybe only a clearing issue.
    edit:

    #av-burger-menu-ul .av-active-burger-items:not(.burger-social) {
        clear: left;
    }
    • This reply was modified 1 year, 9 months ago by  Guenni007.
    #942478

    @project_co_uk : for you it must be (if social_bookmarks are on top)

    you have to erase the rule for

    #av-burger-menu-ul li.social_icon_1 {
     padding-left: 40px
    }

    and then :

    #av-burger-menu-ul li.burger-social {
        float: left;
    }
    
    #av-burger-menu-ul li.burger-social a {
        padding: 10px !important;
        border-bottom: none !important;
    }
    
    #av-burger-menu-ul li.social_icon_4 {
     padding-left: 40px
    }
    
    #av-burger-menu-ul .av-active-burger-items:not(.burger-social) {
        clear: left;
    }
    
    .burger-social a {
        width: 50px;
    }
    
    .burger-social a::before {
        left: 15%;
        position: relative;
    }
    
    #av-burger-menu-ul .av-social-link-facebook.burger-social a:hover {color:#fff !important; background-color:#37589b !important }
    #av-burger-menu-ul .av-social-link-twitter.burger-social a:hover {color:#fff !important; background-color:#46d4fe !important }
    #av-burger-menu-ul .av-social-link-youtube.burger-social a:hover {color:#fff !important; background-color:#a72b1d !important }
    #av-burger-menu-ul .av-social-link-instagram.burger-social a:hover {color:#fff !important; background-color:#a67658 !important }
    • This reply was modified 1 year, 9 months ago by  Guenni007.
    #942556

    Hi @guenni007,

    Thank you man … you have been very very helpful … Great Man … Much appreciated all your help.

    I have added the above code and adjusted the paddings slightly.

    whenever I change PREPEND TO APEND … it completely removes the icons.

    How can I get the order right and how can I move the icons from top to the bottom of menu.

    Thank you,

    #942561

    sorry there was an orthographic error on my code above it is appendTo . ( double : pp )

    so in Ismaels code it is in case of social media at the bottom of hamburger:

    $(socialString).each(function() {
    	$(this).appendTo('#av-burger-menu-ul');
    });

    and because in case of appending the sequence is 1,2,3,4 etc
    the one css rule has then to be:

    #av-burger-menu-ul li.social_icon_1 {
     padding-left: 40px
    }

    because that is the first to come after menu.
    On top there is the first in the row the last of the social_icons ( in your case social_icon_4)

    #942566

    Each solution –
    prependTo and appendTo has its own css rules
    you have now to many padding-left rules in there ( even for social icon 2 and 3 )
    once you like it up now you like it down – but then you have to get rid of the other css rules .
    I’ll wait and see how you decide now. Because the constant back and forth is not fun for me either

    #942588

    @guenni007

    You are star man.

    I have got rid of those extra CSS rules and it looks perfect now.

    My last question and then I will not pester you.

    How can I make this CSS rule global for the whole website instead of just one page.

    .page-id-246 .av-iconlist-small li {
    margin-bottom: 15px;
    }

    Thank you for all your help.

    #942801

    Hi,

    If you remove the .page-id-246 then it will be for all the pages ;-)

    let us know if that would work out for you.

    Best regards,
    Basilis

    #942806

    Hi @basilis

    I have added the following code

    .av-iconlist-small li {
    margin-bottom: 15px;
    }

    and it didn’t change anything on the page.

    But if I add the page id at the start then it works.

    Example (With Page ID)

    Without Page ID

    Please help.

    #943436

    Hi,

    Thank you for the update.

    Make the selector more specific by prepending the body id attribute.

    #top .av-iconlist-small li {
        margin-bottom: 15px;
    }

    Best regards,
    Ismael

    #944338

    You are a star @ismael

    Sorted :)

    #944428

    Hi,

    Awesome! Glad we could help. Please feel free to open a new thread if you need anything else. :)

    Best regards,
    Ismael

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

The topic ‘Social Icons in Mobile Menu’ is closed to new replies.