Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #1075071

    This has been covered a few times, but I’m having an issue getting it to work so I wanted to start a new thread.
    I have a separate menu for mobile and I added this code to display the social media icons in the mobile menu. While it works, there are two bugs:

    1. The social media icons show up three times:
    I noticed that one of the groups of three disappeared when I changed the menu settings to display the regular primary menu on mobile instead of using a separate menu.

    2. When the menu is opened on a laptop and then closed, the social media icons that normally display in the header are removed altogether. I think it’s the result of the function changing the state of those icons once the mobile menu is opened, but not reverting when the mobile menu is closed.
    Before opening the mobile menu:
    After opening the mobile menu:

    Any help or insight is appreciated. I am working locally via Flywheel, so I set up a live link, which I’m hoping will work by the time you are able to check.


    • This topic was modified 1 year, 1 month ago by  libbeydesign.

    Just an update – I had to redesign the header, and by doing so I was able to overcome the second bug (social media not reappearing in larger browser windows) but the first issue still persists – there are two copies of the social media logos inside the mobile menu. I had to update the live link in the credentials area.

    Appreciate any help.


    Sorry for the late reply, but I got the error “Tunnel not found”
    is this on your localhost?
    I have added the function from the solution that you linked to on my localhost and it is working good without the extra social media logos inside the mobile menu.
    Please let us know when your site is back up some we can check the settings and functions to solve this for you.

    Best regards,

    This reply has been marked as private.

    Thanks for the login, I adjusted your script by changing this line:

    htmlString   = $('#header_main .social_bookmarks.icon_count_3:first').find('li a'),

    Now only one set of icons show. I noticed that in your mobile menu these are not centered if you like them to be centered try this css:

    .av-social-link-facebook.av-active-burger-items.burger-social {
    margin-left: 38% !important; 

    Please clear your browser cache and check.

    Best regards,


    Thanks, that worked.



    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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

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