Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 18, 2015 at 10:47 am #445567
    alexoua

    Hi,

    I add a translation widget on the header which is working perfectly when you navigate on google chrome and on big screen. I’ve made the flags appear just next the FB icon.

    When I check it on Safari, the flags don’t appear anymore on small screens like Ipad or Mac Book Pro. They goes on the right side of the site..?? On smartphone, they goes under the menu icons??

    The code I add on the quick css :
    #header .widget {
    right: -15%;
    padding-top: 40px;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    }

    Can you please tell me how to do in order to make all this responsive to any screen and navigator?? Maybe we can add them on the extra elements??

    Thanks a lot for your help:)

    ALexandra

    May 19, 2015 at 9:11 am #446255
    Rikard

    Hi alexoua!

    You don’t have too much space to play around with there, could you be a bit more specific on how you would want it to look like? You could try this CSS instead of the code you have now:

    #header .widget {
  right: 2%;
  padding-top: 0px;
  position: absolute;
  top: 0;
  transform: translate(0%);
  line-height: 10px;
  font-size: 12px;
}

    Cheers!
    Rikard

    May 19, 2015 at 12:43 pm #446380
    alexoua

    Hey,

    Thanks for your reply,

    In fact, I want the flags on the top right of the website. But I want them to appear on any screen and any navigator.

    I’ve tried your code, but the matter is that there is no more link when you try to select the us or the french flag. (you can have a check on the website)

    If I put the below code, the links come back but I don’t see anymore the flags on my mac book pro on Safari :

    #header .widget {
    right: -6%;
    padding-top: 6px;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    }

    Please help me!!! It drives me crazy!!!!

    Thanks a lot:)

    May 19, 2015 at 2:16 pm #446417
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #header .widget { z-index: 101; }

    I checked your website on Safari but i can see flags in French version as well. Have you figured it out already? If not, please explain how we can reproduce the issue

    Cheers!
    Yigit

    May 19, 2015 at 2:31 pm #446427
    alexoua

    Hey Yigit,

    No I didn’t do anything..;

    But now with the line #header .widget { z-index: 101; } you’ve made me add, the link came back so I can leave it like this..

    Thanks a lot for everything… If I can leave a message somewhere for you to say how great you are for your support, do not hesitate to tell me where. I will do it…

    Thanks again,

    Cheers!

    ALex

    May 20, 2015 at 8:37 am #446980
    Rikard

    Hi Alex!

    Thanks for the kind words, we’re happy as long as you get your problems fixed but you could leave a good review on Themeforest if you like. I’m not sure how to proceed with your problem, are you ok with the way it looks and behaves?

    Regards,
    Rikard

    May 20, 2015 at 12:58 pm #447070
    alexoua

    Hi!

    Everything is ok now with the flags matter…! thanks a lot..

    I will check on themeforest to leave you a good comment because you really deserve it :)

    Thanks again

    Have a nice day:)

    May 20, 2015 at 3:10 pm #447139
    Yigit

    Hey!

    You are welcome, we are always happy to help! Let us know if you have any other questions or issues :)

    Cheers!
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘widget header / not responsive’ is closed to new replies.