Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 22, 2024 at 1:11 am #1440470
    xfacta

    Hi there
    For the Header Social Icons – I have it set to: Display in main header area but they don’t show on mobile – how do I get the social icons to show on the mobile header area?

    Cheers
    Natasha

    April 22, 2024 at 7:06 am #1440485
    Ismael

    Hey xfacta,

    Thank you for the inquiry.

    The icons are hidden on mobile devices by default, but you can display them back with this css code:

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

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

    Best regards,
    Ismael

    April 22, 2024 at 7:27 am #1440489
    xfacta

    Hey Ismael

    Great thanks so much. How can I make the icons slightly bigger though on mobile?

    Cheers
    Natasha

    April 22, 2024 at 7:37 am #1440492
    Ismael

    Hi,

    Include this code inside the css media query to adjust the size of the icons:

      #top .social_bookmarks li {
    width: 40px;
    margin-right: 4px;
  }

  #top .social_bookmarks li a {
    width: 40px;
    line-height: 40px;
    min-height: 40px;
    font-size: 24px;
  }

    Best regards,
    Ismael

    April 22, 2024 at 7:42 am #1440494
    xfacta

    Thanks so much :-)

    April 22, 2024 at 9:03 am #1440499
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    April 23, 2024 at 6:44 am #1440560
    xfacta

    You can close – thanks again :-)

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Header Social Icons for mobile’ is closed to new replies.