Tagged: mobile menu, social media icons
-
AuthorPosts
-
July 20, 2017 at 3:29 pm #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.8July 22, 2017 at 4:35 pm #827870Hey sakib002001,
Please provide a link to the site in question so we can look into this further.
Best regards,
Jordan ShannonJuly 28, 2017 at 4:24 pm #831130This reply has been marked as private.July 28, 2017 at 4:31 pm #831134Hi,
So you want them shown within the menu that flys out from the right side?
Best regards,
Jordan ShannonJuly 28, 2017 at 4:37 pm #831142Yes, exactly. On top of the menu items.
July 28, 2017 at 5:32 pm #831182Hi,
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 ShannonJuly 31, 2017 at 1:34 pm #832107This reply has been marked as private.July 31, 2017 at 9:25 pm #832438Hi,
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 ShannonAugust 1, 2017 at 4:24 pm #832949This reply has been marked as private.August 7, 2017 at 6:16 am #835215Hi,
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,
IsmaelDecember 1, 2017 at 2:02 am #883663Hi 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 #883891Hi Dave,
Yes, please add the code Ismael gave in functions.php.
Best regards,
NikkoApril 15, 2018 at 3:22 pm #942218I 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 #942277do 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 #942325I 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 :)
- This reply was modified 6 years, 7 months ago by projectt_co_uk.
April 16, 2018 at 9:14 am #942471there 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, 7 months ago by Guenni007.
April 16, 2018 at 9:30 am #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 6 years, 7 months ago by Guenni007.
April 16, 2018 at 1:19 pm #942556Hi @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 #942561sorry 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 #942566Each 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 eitherApril 16, 2018 at 2:36 pm #942588You 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 #942801Hi,
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,
BasilisApril 16, 2018 at 11:10 pm #942806Hi @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.
April 18, 2018 at 6:51 am #943436Hi,
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,
IsmaelApril 19, 2018 at 10:08 pm #944338You are a star @Ismael
Sorted :)
April 20, 2018 at 5:25 am #944428 -
AuthorPosts
- The topic ‘Social Icons in Mobile Menu’ is closed to new replies.