Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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:
    https://drive.google.com/file/d/1beHILwFvL7XI3D4JfxPAstZv7iz2sKqX/view?usp=sharing
    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:
    https://drive.google.com/file/d/1Kij_eyQyde6ax1_QWwGbvvjJ-TQ5A_-L/view?usp=sharing
    After opening the mobile menu:
    https://drive.google.com/file/d/1_VAjbrOkS1IGxmQj0w4xKYwYMh2CgfLd/view?usp=sharing

    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.

    Thanks,
    Mary

    • This topic was modified 10 months, 2 weeks ago by  libbeydesign.
    #1075687

    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.

    #1076832

    Hi,
    Sorry for the late reply, but I got the error “Tunnel 3872525d.ngrok.io 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,
    Mike

    #1077210
    This reply has been marked as private.
    #1077632

    Hi,
    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,
    Mike

    #1077874

    Thanks, that worked.

    #1077892

    Hi,

    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.