Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 21, 2020 at 4:56 pm #1254704
    akak

    Hello, I have set the social media icons to be shown in the header. It works very well on desktop and iPad view. However, the social media icons disappear on iPhone view. May I know how can I fix the problem, please? Thank you very much!

    October 23, 2020 at 7:06 am #1255153
    Rikard

    Hey akak,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header .social_bookmarks {
    display: block;
    width: 200px;
}
}

    Best regards,
    Rikard

    October 23, 2020 at 2:23 pm #1255254
    akak

    Hi Rikard,

    Thank you! It works! As now the social media icons on mobile view is on the left side of the hamburger menu. At the moment, the social media icons will jump to right of the hamburger menu when the screen width is larger than 479px.

    I would like to unify the position of the social icons with screens with a screen width in between 360px and 1024px:
    All social media icons to the left of the hamburger menu.

    And for screen width smaller than 360px: social media icons will be hidden as they will crash with the logo.

    It will be appreciated if this adjustment could be done. Thank you!! :)

    October 23, 2020 at 3:48 pm #1255282
    Yigit

    Hi,

    I added following code to bottom of Quick CSS field

    @media only screen and (max-width: 360px) { 
.responsive #top #wrap_all #header .social_bookmarks { 
    display: none; 
}}
@media only screen and (max-width: 480px) {
.responsive #top #wrap_all #header .social_bookmarks {
    width: auto;
}
.responsive #top .av-logo-container .avia-menu {
     right: 50px;
}}

    Please review your website :)

    Best regards,
    Yigit

    October 23, 2020 at 4:15 pm #1255289
    akak

    Hi Yigit,
    Thank you for your help! I would like to have some small adjustments:

    1. Add more margin to the right side of the icons when the screen width is between 360px and 480px
    2. Reduce the right margin of the hamburger menu when the screen width is 360px or below (Same margin distance as the left margin of the logo)
    3. When I click the hamburger menu on the mobile view, a white line appears on the facebook icon. May you fix this please?

    Thank you!! :)

    October 27, 2020 at 11:04 am #1255993
    akak

    Hi, may someone help me with the issues, please?
    Thank you!

    October 27, 2020 at 1:27 pm #1256039
    Yigit

    Hi,

    I adjusted custom CSS code in Quick CSS field. Please flush browser cache and review your website :)

    Best regards,
    Yigit

    October 27, 2020 at 2:15 pm #1256063
    akak

    Hi Yigit,
    Super! Thank you very much for your support! :)

    October 27, 2020 at 2:18 pm #1256066
    Yigit

    Hi,

    You are welcome!
    Let us know if you have any other questions or issues and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Social media icons in the header not shown on mobile view’ is closed to new replies.