Tagged: ,

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • July 20, 2017 at 3:29 pm #824634
    sakib002001

    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

    July 22, 2017 at 4:35 pm #827870
    Jordan Shannon

    Hey sakib002001,

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

    Best regards,
    Jordan Shannon

    July 28, 2017 at 4:24 pm #831130
    sakib002001
    This reply has been marked as private.
    July 28, 2017 at 4:31 pm #831134
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

    July 28, 2017 at 4:37 pm #831142
    sakib002001

    Yes, exactly. On top of the menu items.

    July 28, 2017 at 5:32 pm #831182
    Jordan Shannon

    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

    July 31, 2017 at 1:34 pm #832107
    sakib002001
    This reply has been marked as private.
    July 31, 2017 at 9:25 pm #832438
    Jordan Shannon

    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

    August 1, 2017 at 4:24 pm #832949
    sakib002001
    This reply has been marked as private.
    August 7, 2017 at 6:16 am #835215
    Ismael

    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

    December 1, 2017 at 2:02 am #883663
    dmpitzer

    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

    December 1, 2017 at 1:30 pm #883891
    Nikko

    Hi Dave,

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

    Best regards,
    Nikko

    April 15, 2018 at 3:22 pm #942218
    projectt_co_uk

    @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.

    April 15, 2018 at 8:16 pm #942277
    Guenni007

    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');
			});
    April 15, 2018 at 10:52 pm #942325
    projectt_co_uk

    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 :)

    April 16, 2018 at 9:14 am #942471
    Guenni007

    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 6 years, 6 months ago by Guenni007.
    April 16, 2018 at 9:30 am #942478
    Guenni007

    @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 6 years, 6 months ago by Guenni007.
    April 16, 2018 at 1:19 pm #942556
    projectt_co_uk

    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,

    April 16, 2018 at 1:27 pm #942561
    Guenni007

    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)

    April 16, 2018 at 1:45 pm #942566
    Guenni007

    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

    April 16, 2018 at 2:36 pm #942588
    projectt_co_uk

    @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.

    April 16, 2018 at 10:54 pm #942801
    Basilis

    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

    April 16, 2018 at 11:10 pm #942806
    projectt_co_uk

    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)

    Rohingya Crisis Appeal

    Without Page ID

    Syria Crisis Appeal

    Please help.

    April 18, 2018 at 6:51 am #943436
    Ismael

    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

    April 19, 2018 at 10:08 pm #944338
    projectt_co_uk

    You are a star @Ismael

    Sorted :)

    April 20, 2018 at 5:25 am #944428
    Ismael

    Hi,

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

    Best regards,
    Ismael

  • Author
    Posts
Viewing 26 posts - 1 through 26 (of 26 total)
  • The topic ‘Social Icons in Mobile Menu’ is closed to new replies.