Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 21, 2015 at 5:19 am #382869
    JanRsimon

    Dear Kriesi Support,

    Thanks a lot for your great theme!

    We’ve setup a site with WPML Translation (top, above logo on the left) and social media icons (top above menu on the right).

    When we test it on responsiveness and squeeze it (or open it on an Smartphone) the icons suddenly get centered. Social media icons stay on top above the header while the flags drop down to the header section and create a mess.

    Could you tell us if that’s intended or just a minor bug?

    If it’s intended, how can we fix it that the icons stay where they supposed to be (top left and right above the header).

    Thanks a lot for your help on this,

    Jan

    • This topic was modified 9 years, 9 months ago by Elliott.
    January 21, 2015 at 5:50 pm #383190
    Yigit

    Hi JanRsimon!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul { float: left; width: 50%; }
.responsive #header .social_bookmarks { width: 50%; float: right; }}

    Best regards,
    Yigit

    January 22, 2015 at 3:52 pm #383729
    JanRsimon

    Hi Yigit,

    thanks a lot for your super fast response! I really appreciate it a lot. That fixed my issue half way. I think the padding of the flags (two) is a bit too much. So the first flag stays on top and the second drops down.

    Is there an option to activate a drop down language switcher which stays up there (right now we’ve 2 languages but will have more in the future).

    Thanks a lot Yigit!

    Jan

    January 23, 2015 at 12:45 pm #384315
    Ismael

    Hi!

    Adjust the padding with this:

    @media only screen and (max-width: 767px) {
.responsive #header_meta .sub_menu>ul>li {
padding: 0 1px;
}
}

    If you want a dropdown switcher, please refer to this link: https://kriesi.at/support/topic/wpml-12/#post-374726

    Cheers!
    Ismael

    January 25, 2015 at 11:17 am #385069
    JanRsimon

    Hi Ismael,

    thanks a lot for your quick help! That did the trick! complete code line is into the custom css of enfold is:

    @media only screen and (max-width: 767px) {
.responsive #header .sub_menu, .responsive #header_meta .sub_menu>ul { float: left; width: 50%; }
.responsive #header .social_bookmarks { width: 50%; float: right; }
.responsive #header_meta .sub_menu>ul>li {
padding: 0 1px;
}}

    Also in order to work on WPML translated sites you’ve to copy this code into the custom CSS section in WPML as well (otherwise it works on the original page but not on the translated page).

    I didn’t use the dropdown for now but thanks lot for pointing this out. Will have it bookmarked once the flags are too crowded.

    Can be closed.

    Jan

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Enfold WPML flags and social media icons get centered in mobile view’ is closed to new replies.