Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 11, 2019 at 1:42 am #1099456
    webguy007

    When viewing in mobile sizes 1001×768 through 1165×768 the top menu with the social media icons are cut off. How do I solve this?

    View post on imgur.com

    Thanks!

    May 12, 2019 at 9:07 am #1099692
    Rikard

    Hey webguy007,

    This CSS is causing that to happen:

    nav.main_menu {
    left: 28%;
}

    Please alter it or apply different code in a media query for the screen sizes in question.

    Best regards,
    Rikard

    May 12, 2019 at 2:33 pm #1099744
    webguy007

    Hi,

    I assume this is the CSS to add:

    @media only screen and (max-width:1112px) {
    nav.main_menu {
    left: 10%;
    }}

    Thank you

    • This reply was modified 5 years, 7 months ago by webguy007.
    May 13, 2019 at 6:01 am #1099900
    Rikard

    Hi,

    If that works as you want it to on that screen size, then yes :-)

    Best regards,
    Rikard

    May 14, 2019 at 5:49 am #1100363
    webguy007

    Actually, how do I have the social media icons show below the logo and burger menu in the header?
    Link is below of the area highlighted in yellow where I need the social media icons to show in mobile screens.

    Thanks

    May 14, 2019 at 2:38 pm #1100559
    Victoria

    Hi webguy007,

    Well, this can be difficult. You can try adding the widget to the header and showing it just on mobile.

    Here is how to add the widget area to the header

    Header

    Best regards,
    Victoria

    May 15, 2019 at 11:29 pm #1101189
    webguy007

    Hi,

    I added this code:
    @media only screen and (max-width: 479px) {
    ul.social_bookmarks {
    display:block !important;
    }
    }

    The issue is it appears on the top line. How do I have it appear below the phone number and appear centered on the 2nd line on the header?

    Thanks

    May 18, 2019 at 9:37 pm #1102099
    Victoria

    Hi webguy007,

    I am only seeing the span phone info and no header widget. Did you add it at all?

    Best regards,
    Victoria

    May 19, 2019 at 10:23 pm #1102329
    webguy007

    Please check now.. I had to restore the site to the latest version of where I’m talking about in needing help.

    Thanks

    May 23, 2019 at 4:15 am #1103510
    Ismael

    Hi,

    Thanks for the update.

    Do you want to reverse the order of the social icons and the phone number? This css code should help.

    @media only screen and (max-width: 767px) {
.responsive #top #header_meta .container {
    display: flex;
    flex-direction: column;
}

.responsive #top #header_meta .container .social_bookmarks {
    order: 2;
}
}

    Best regards,
    Ismael

    May 23, 2019 at 4:20 am #1103512
    webguy007

    Awesome! That’s what worked!

    Thanks

    May 27, 2019 at 3:54 pm #1104534
    Vinay

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Please bookmark Enfold Documentation for future reference.
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Mobile responsive top social media icons’ is closed to new replies.