Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 15, 2016 at 2:25 am #686644
    Micheal0424

    This is the settings I am using: Header / Extra Elements / Header Social Icons / Display in main header area

    Looks great on the desktop but is not visible on a mobile, what can be done to make the social icons visible on a mobile like they are when they are displayed in the bar option?

    Thank you.

    By the way, love the updates with 3.8, can’t wait to explore it more!

    September 16, 2016 at 8:40 am #687321
    Rikard

    Hey Micheal0424,

    Glad you like the new features :-)

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    September 19, 2016 at 7:38 pm #688720
    Micheal0424

    As you can see with this website the social icons are visible on the desktop but not on the mobile view.

    This is only the case when using the settings: Header / Extra Elements / Header Social Icons / Display in main header area

    Thank you.

    September 19, 2016 at 7:41 pm #688722
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .responsive.html_mobile_menu_tablet #header_main .social_bookmarks {
    display: block !important;
}

    Cheers!
    Yigit

    September 19, 2016 at 9:15 pm #688808
    Micheal0424

    Thank you, they are showing up now.

    They are not showing up properly on the screen though.

    The Facebook icon is mostly not seen, is there a way to center the icons?

    I tried this but it didn’t work:

    .responsive.html_mobile_menu_tablet #header_main .social_bookmarks {
    display: block !important;
    position: center;
    }

    What would be even better is the social media icons could be at the centered top of the screen if that it possible.

    Thank you.

    September 20, 2016 at 1:20 pm #689158
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

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

.responsive.html_header_top #header_main .social_bookmarks, .responsive.html_top_nav_header #top .social_bookmarks {
    right: 0;
}}

    Best regards,
    Yigit

    September 24, 2016 at 3:31 am #691066
    Micheal0424

    That worked, thanks.

    I changed where it says right to center thinking it would center the icons in the middle of the screen and it put the icons back off the screen like it was before.

    How do I center the icons and also bring them to the top of the screen above the logo and hambuger menu?

    Thank you.

    September 26, 2016 at 5:57 am #691466
    Jordan

    Hi,

    Sorry for the late reply.

    Try changing the value for the “right” from 0 to -25% and see if that helps center the social icons.

    Best regards,
    Jordan

    October 3, 2016 at 6:51 am #694450
    Micheal0424

    That didn’t make a difference.

    My other question was how to get the social media icons to the top of the mobile device?

    Any ideas?

    Thank you.

    October 4, 2016 at 2:42 pm #695062
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 767px) {
#header_meta {
    z-index: 1;
}
.responsive.html_mobile_menu_tablet #header_main .social_bookmarks {
    position: relative;
    top: -90px;
}}

    Best regards,
    Yigit

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