Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 22, 2024 at 2:18 pm #1431674
    orianos

    I have a problem displaying the social icon on mobile devices.
    I tried to follow the instructions I found on different threads, but the result I get is wrong, as you can see from the screenshot I attach on Private content.

    Where am I wrong?

    Best regards
    Oriano

    January 24, 2024 at 8:05 am #1431851
    Ismael

    Hey Oriano,

    Thank you for the inquiry.

    Please remove the previous modification, then use the following css code instead.

    @media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  .responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks {
    display: block;
  }
}

    Best regards,
    Ismael

    January 24, 2024 at 8:33 am #1431860
    orianos

    Hi Ismael, thanks for your answer.

    Consider that in the site I use WPML and that the Header Extra Elements are arranged in this way.

    With your css, this is the result in the desktop (it’s ok)

    But on mobile I continue to have the double display of the social icon.

    I saw that if I place social icon in the Main Header Area, your css also works correctly on Mobile.
    But in my case I would like to keep both the social icon and the wplm flags positioned at the top bar left of the header. If this is possible…

    Best regards
    Oriano

    January 25, 2024 at 7:06 am #1431961
    Ismael

    Hi,

    Thank you for the update.

    Did you remove the css code? Please add it again, then include the following css rule to hide the duplicate social icons beside the burger menu.

    .responsive #top #header_main .main_menu .social_bookmarks {
    display: none;
}

    Best regards,
    Ismael

    January 25, 2024 at 9:50 am #1431985
    orianos

    Hi Ismael, thanks for your help.

    > Please add it again, then include the following css rule to hide the duplicate social icons beside the burger menu.

    these are the css I have now entered:

    @media only screen and (max-width: 989px) {
 /* Add your Mobile Styles here */
 .responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks {
   display: block;
}
}
.responsive #top #header_main .main_menu .social_bookmarks {
   display: none;
}

    Now the duplicate of the social icon is hidden.

    It remains to correct, if possible, the current position of the social icon on Mobile, which is currently above the WPML icons, while I would prefer it to be online.

    Best regards
    Oriano

    January 26, 2024 at 10:30 am #1432108
    Ismael

    Hi,

    The latest code should be placed inside the css media query. Please remove all css code related to this thread, then replace it with the following code.

    
@media only screen and (max-width: 767px) {

  #header_meta .container {
    display: flex;
    justify-content: flex-start;
  }

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header .social_bookmarks,
  .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
    text-align: left;
    width: auto;
  }

  .responsive #header .sub_menu,
  .responsive #header_meta .sub_menu>ul {
    float: none;
    width: auto;
    text-align: center;
    margin: 0 auto;
    position: static;
    margin: 0;
  }

  .responsive #top #wrap_all #header_main .social_bookmarks {
    display: none;
  }
}

    This should remove the duplicate social bookmarks container and position the icons beside the language flags in the far-left corner of the header meta container.

    Best regards,
    Ismael

    January 26, 2024 at 11:30 am #1432122
    orianos

    Hi Ismael, thank you for your help and patience.

    Now the social icon (and wpml icon) display is in the location I wanted.
    On Mobile,
    on tablet,
    and on desktop.

    Many thanks.
    Best regards,
    Oriano

    January 27, 2024 at 5:56 pm #1432231
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Problem on show social icons in mobile header’ is closed to new replies.