Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #690663

    Hi
    WPML language tab doesn’t show up in mobile and tablet mode of the website (link in private area)

    Let me know please how may I fix that?

    Regards,
    Sadegh

    #692199

    Hey Sadegh,

    It does not show up on my end on desktop as well. Where would you like to display it? And can you please create a temporary admin login and post it here privately?

    Best regards,
    Yigit

    #692805

    Hey dear Yigit,

    – Could you please check that again (I had to remove the plugin due to our host issues, but now it works fine)
    – In both Mobile and Tablet mode, I would like to display the languages besides the menu square (as it has illustrated below)
    .

    + It seems that Tablet menu doesn’t look like as same as Mobile menu. I don’t know why, but I wonder how could I make Tablet mode exactly looks like Mobile menu.
    + You may find the credentials in private area.

    #693531

    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 .sub_menu {
        min-width: 560px;
        background: rgba(0, 0, 0, 0);
        padding-left: 0;
        padding-top: 0px;
        right: 30%;
        position: relative !important;
        top: 15px;
    }
    }
    
    @media only screen and (max-width: 990px){
    #header_meta {
        display: block !important;
        height: 0px !important;
        min-height: 0px !important;
    }
    }
    

    Best regards,
    Jordan

    #693616

    Hi Jordan,
    The code doesn’t work for me and the WPML language still doesn’t show up in both Tablet and Mobile mode.

    Regards,
    Sadegh

    #694404

    Hi,

    We added the css code in the English and Persian General Styling > Quick CSS field. Please remove browser or hard refresh the page.

    Best regards,
    Ismael

    #694463

    Hi,

    > Please change the code you used.
    As it made the website looks wrong in Tablet mode. Here is the screen:
    .
    In mobile mode, the flags are not in center, anyway we could fix that?

    > And also, let me know please what code did you used.

    Regards,
    Sadegh

    #695646

    Hi,

    I can’t find any flags on your website. Did you remove them again? Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Andy

    #695762

    Hey dear Andy,
    Yes, you are right (the flags are changed to the texts).
    So let me give you a fresh look:

    >> Here is the website in desktop mode: (which is totally fine with us)
    .

    >> Here is the website in tablet mode and mobile mode (where the problem is exists)
    Tablet Mode:
    .
    Mobile Mode:
    .

    In both Tablet and Mobile mode, we would like to just see the language texts (English – فارسی), without seeing any search bar.

    Regards,
    Sadegh

    #696023

    Hey!

    Please add following code to Quick CSS

    @media only screen and (max-width: 990px) {
    #top #searchform {
        display: none !important;
    }
    #header_meta .sub_menu {
        min-width: auto;
    }
    }

    Regards,
    Yigit

    #696036

    Hey Yigit,

    This is what happening after adding the code you gave for tablet and mobile mode:

    >> Tablet mode:
    – Is it possible to make the blue bar full width?
    .

    >> Mobile mode still doesn’t changed and the problem is still exist as before.

    Kind regards,
    Sadegh

    #696800

    Hi!

    We modified the css codes in the Quick CSS field.

    #top .sub_menu > ul {
        float: right;
        margin-right: 20px;
    }
    
    .rtl .widgettitle {
        text-align: right!important;
        direction: rtl !important;
    }
    
    @media only screen and (max-width: 989px) {
      .responsive #top #searchform {
          display: none !important;
      }
      .responsive #header_meta .sub_menu {
          min-width: auto;
      }
    
      .responsive #header_meta {
          display: block !important;
      }
    
      .responsive #header_meta .sub_menu {
          background: rgba(0, 0, 0, 0);
          padding-left: 0;
          padding-top: 0px;
          position: relative !important;
      }
    
      #header_meta {
          margin-bottom: 30px;
      }
    
      .responsive #top #header_meta .container {
          background: #0077b4;
          width: 100%;
          max-width: 100%;
      }
    
      .responsive .avia_wpml_language_switch {
        height: auto;
      }
    
      .responsive #top .sub_menu li {
        line-height: 30px;
        top: -8px;
      }
    }
    
    @media only screen and (max-width: 767px) {
      .responsive #header_meta {
        margin-bottom: 0;
      }
    
      #top ul.avia_wpml_language_switch li {
        top: 10px;
      }
    
      .responsive #top .sub_menu li {
        top: 0px;
      }
    
      .responsive #top .sub_menu a {
        top: 0;
      }
    }

    Cheers!
    Ismael

    #696908

    Hi Ismael,

    Thanks a lot for your very kind help, it works great now. Just it seems that 2 little issues left:

    1- May I know if it is possible to align the WPML language texts in center intablet mode?

    2- As I have illustrated in below image, WPML languages looks different in RTL mode (Persian/Farsi language). Any chance we could make them in center like the one shows in right side?
    .

    Regards,
    Sadegh

    #697287

    Hi,

    try this code inside Quick CSS field:

    @media only screen and (max-width: 1024px) and (min-width: 768px) {
    .av_secondary_right .sub_menu {
    right: 39%;
    }}
    

    and adjust as needed.

    Best regards,
    Andy

    #697320

    Hey Andy,

    Thanks for the code.
    However, the problem with mobile mode in Farsi page + (RTL mode) is still remains.

    Regards,
    Sadegh

    #697485

    Hi,

    use this inside your Farsi page:

    #top .av_header_transparency #header_meta li {
    left: 27%;
    }
    

    Best regards,
    Andy

    #699458

    Hi Andy,

    Your code gets conflicted with the search bar, so I have removed it:
    .

    Regards,
    Sadegh

    • This reply was modified 8 years ago by Sadegh.
    #699923

    Hi,

    this is what I see in table landscape mode:

    English:
    http://smrtshot.com/i/RlzL

    Farsi:
    http://smrtshot.com/i/RzOJ

    They seem the same to me, so it seems fine to me now. Could you fix it already?

    Best regards,
    Andy

    #699931

    Hey Andy,

    Uh, if you remember, the problem was with the mobile mode in Farsi pages. As I have already illustrated it in an image:

    .

    =
    P.S> The last code you were kindly wrote for me (below code) didn’t work and caused a problem (I showed that in the image).

    #top .av_header_transparency #header_meta li {
    left: 27%;
    }

    .
    =

    Regards,
    Sadegh

    #699945

    Hi,

    then use my code and add some media queries into, so it will work on mobile only:

    @media only screen and (max-width: 767px) {
    #top .av_header_transparency #header_meta li {
    left: 27%;
    }}
    

    Adjust as needed.

    Best regards,
    Andy

    #699950

    Hey Andy,

    Thank you however, it works only for the homepage, it doesn’t seems to be affected on the other pages in Farsi (in mobile mode).

    Cheers,
    Sadegh

    #700934

    Hi,

    add this as well:

    @media only screen and (max-width: 767px) {
    ul.avia_wpml_language_switch.avia_wpml_language_switch_extra {
    margin-right: -100px !important;
    }}

    Best regards,
    Andy

    #701092

    Hi Andy,

    I think this thread gets too long. I will open another thread to solve the left issue :)
    Thanks for your time
    (you may now close the thread please)

    Regards,
    Sadegh

    #701295

    Hi,

    alright. Thanks for this.

    Best regards,
    Andy

Viewing 24 posts - 1 through 24 (of 24 total)
  • The topic ‘WPML doesn't show in mobile’ is closed to new replies.