![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
May 11, 2019 at 1:42 am #1099456
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?
Thanks!
May 12, 2019 at 9:07 am #1099692Hey 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,
RikardMay 12, 2019 at 2:33 pm #1099744Hi,
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, 4 months ago by
webguy007.
May 13, 2019 at 6:01 am #1099900Hi,
If that works as you want it to on that screen size, then yes :-)
Best regards,
RikardMay 14, 2019 at 5:49 am #1100363Actually, 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 #1100559Hi 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
Best regards,
VictoriaMay 15, 2019 at 11:29 pm #1101189Hi,
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 #1102099Hi webguy007,
I am only seeing the span phone info and no header widget. Did you add it at all?
Best regards,
VictoriaMay 19, 2019 at 10:23 pm #1102329Please 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 #1103510Hi,
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,
IsmaelMay 23, 2019 at 4:20 am #1103512Awesome! That’s what worked!
Thanks
May 27, 2019 at 3:54 pm #1104534Hi,
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 -
This reply was modified 5 years, 4 months ago by
-
AuthorPosts
- The topic ‘Mobile responsive top social media icons’ is closed to new replies.