Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • July 21, 2020 at 9:23 pm #1232090
    AlidaKal

    Hi
    I would like to add an icon (specificly the whatsapp icon) next to one of the menu items (specificly the whatsapp link) in the mobile burger menu.
    I use the mobile burger menu for all screensizes , also for desktop.
    In addition I would like to have 3 social icons positioned horizontally next to each other under the menulist in my mobile menu.
    Have been lookin throughout the whole forum , tried a few things but nothing seems to work.
    Thank you very much in advance!

    Kind regards
    Astrid

    July 22, 2020 at 4:33 pm #1232304
    Victoria

    Hey AlidaKal,

    Please have a look at the following thread:
    https://kriesi.at/support/topic/add-icons-to-enfold-principal-menu/

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 22, 2020 at 8:42 pm #1232407
    AlidaKal

    Hi Victoria

    I have tried that one already , as many other suggestions in the forum too. Nothing seems to be working sofar. Please help with further advice.

    Thank you

    July 24, 2020 at 11:39 am #1232936
    AlidaKal

    Hi
    Can you please help me further with this subject?
    Thanks

    July 24, 2020 at 11:50 am #1232943
    Victoria

    Hi AlidaKal,

    I added the Whatsapp icon for you. Please check.

    Best regards,
    Victoria

    July 24, 2020 at 2:40 pm #1233007
    AlidaKal

    Hi Victoria
    Wow , thank you almost perfect :-) but it is on the wrong side ..
    I need the whatsapp icon on the right side of the text (now it is positioned on the left). How can I do that? I saw the code in the menu but I can’t seem to change it. Please tell me how and where I can change that?

    My other questions was to have the 3 social icons( linkedin, instagram and mail icon) positioned under the mobile menulist . How can I add them?

    Thank you very much!

    Best Regards
    Astrid

    July 24, 2020 at 2:44 pm #1233009
    AlidaKal

    Hi Victoria
    Wow , thank you almost perfect :-) but it is on the wrong side ..
    I need the whatsapp icon on the right side of the text (now it is positioned on the left). How can I do that? I saw the code in the menu but I can’t seem to change it. Please tell me how and where I can change that?

    My other questions was to have the 3 social icons( linkedin, instagram and mail icon) positioned under the mobile menulist . How can I add them?

    Thank you very much!

    Best Regards
    Astrid

    July 24, 2020 at 3:22 pm #1233023
    Victoria

    Hi,

    Please have a look at the following thread:
    https://kriesi.at/support/topic/social-icons-in-mobile-menu-3/

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.menu-item-515.av-active-burger-items .avia-menu-text {
    display: inline-flex;
}
.menu-item-515.av-active-burger-items .avia-menu-text .av_font_icon {
    margin-left: 10px;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 24, 2020 at 3:56 pm #1233037
    AlidaKal

    Hi Victoria
    Thank you , the styling worked for moving the whatsaapp button to the right. :-)

    I still have this question:
    1) If I go to the menu, I can see there code that cannot be changed. I would like to know how and where that code is added so I can use myself for adding another button the next time.

    2)The link you gave me is about adding the social buttons at the bottom, that is a long list of information in that thread . I will look into this and see if I can understand and do that myself.

    Please help me for now with my 1st question, I will attach an image to clearify
    Thank you!

    Beste regards
    Astrid

    July 24, 2020 at 4:00 pm #1233038
    AlidaKal

    Hi Victoria
    Apologise , I already saw the answer for my first question! That is solved

    I will look into your solution for the social icons at the bottom
    Best regards
    Astrid

    July 25, 2020 at 11:34 am #1233183
    Rikard

    Hi Astrid,

    Thanks for the update, please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    July 30, 2020 at 5:00 pm #1234183
    AlidaKal

    Hi
    Sorry for late reply. I do still have a question:
    Thanks to the css code the whatsapp icon is now positioned on the right side of the navigation link. But if you open the flyout menu you can really see it moving from left of the nav word (‘whatsapp’ )to the right side of the nav word. That doesn’t look good. Is it possible to change that so yiou will not see the icon moving?

    Thank you very much!

    Best Regards
    Astrid

    August 3, 2020 at 6:07 am #1234706
    Ismael

    Hi,

    Thank you for the update.

    Did you add this css code?

    .menu-item-515.av-active-burger-items .avia-menu-text {
	display: inline-flex;
}

    Please try to set the display property to “block”, then include this css code.

    .avia-menu-text .avia-icon-pos-left {
	float: right;
	margin-right: 105px;
}

.avia_transform .avia_start_delayed_animation.av_font_icon.avia-icon-animate {
	-webkit-animation: none;
	animation: none;
}

    Best regards,
    Ismael

    August 4, 2020 at 10:08 am #1235068
    AlidaKal

    Hi Ismael
    That worked very well thank you!

    Kind regards
    Astrid

    August 4, 2020 at 11:25 pm #1235240
    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 15 posts - 1 through 15 (of 15 total)
  • The topic ‘how to add an icon to the mobile menu’ is closed to new replies.