Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 6, 2021 at 11:44 pm #1304304
    tonyiatridis

    Hi I need to get the social media icons onto the mobile version of a site and found this code to do so:

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

    problem is it shows up twice, see this ink

    https://gaylemartz.com/wp-content/uploads/2021/06/IMG_1952.png

    I tried removing either #top or #header and having just one but that didn’t seem to work.

    I want them just at the very top and not near the burger menu. Do you have a css hack that accomplished that?

    Thanks so much.

    Tony

    June 8, 2021 at 9:05 am #1304569
    Ismael

    Hey tonyiatridis,

    Thank you for the inquiry.

    You can remove the social icons inside the main header with this css code.

    #header_main .social_bookmarks {
    display: none !important;
}

    Or just use this css code to only show the social icons in the top bar.

    #header_meta .social_bookmarks {
    display: block !important;
}

    Please do not forget to place the css rules above inside the css media query.

    Best regards,
    Ismael

    June 8, 2021 at 7:39 pm #1304742
    tonyiatridis

    That worked like a charm, thanks pal.

    June 10, 2021 at 7:41 am #1305009
    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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.