Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 5, 2019 at 9:03 pm #1075071
    libbeydesign

    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 5 years, 9 months ago by libbeydesign.
    March 6, 2019 at 10:55 pm #1075687
    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.

    March 9, 2019 at 9:59 pm #1076832
    Mike

    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

    March 11, 2019 at 4:59 am #1077210
    libbeydesign
    This reply has been marked as private.
    March 12, 2019 at 5:27 am #1077632
    Mike

    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

    March 12, 2019 at 5:55 pm #1077874
    libbeydesign

    Thanks, that worked.

    March 12, 2019 at 6:42 pm #1077892
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

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