WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Zenon Lite multilingual header problem (flags) (13 posts)

  1. Niels V.
    Member
    Posted 2 years ago #

    Hi everyone!

    I'm using the qTranslate plugin to make my site multilingual. I'm having a small issue with the header though.

    I want the little language selection flags to appear in the top right corner of the header, so that visitors can switch languages without having to scroll to the footer.

    Now I've found the code that does this - I'm just having trouble positioning the flags.

    Take a look at my website to see how the flags float around the page. This is of course not how I want it!

    http://www.nielsvandel.com

    I've put the following code in the header.php code, where it says MENU STARTS:

    <?php echo qtrans_generateLanguageSelectCode('both'); ?>

    The full code looks like this:

    <div id="menu_wrap"><div class="center"><div id="topmenu"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?></div><?php echo qtrans_generateLanguageSelectCode('both');?> </div></div>

    The bold part is where I put the code.

    Does anyone know what I should do?

    I thank you in advance for your help!

  2. Towfiq I.
    Member
    Posted 2 years ago #

    try this way:

    <div id="menu_wrap"><div class="center"><div id="topmenu"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?><?php echo qtrans_generateLanguageSelectCode('both');?> </div></div></div>

    and then add this to your stylesheet:

    #menu_wrap{position:relative;}
    #qtranslate-chooser{ margin-top: -50px;
    padding: 0;
    position: absolute;
    right: 20px;
    width: 150px;}
    #qtranslate-chooser li{display: inline-block;list-style-type: none;margin-right: 20px;}

  3. Niels V.
    Member
    Posted 2 years ago #

    Nothing happened. Is there any special place in the stylesheet that I should put the code? I put it here:

    /*MENU*/
    #menu_wrap{width:100%; float:left;}
    #menu_wrap{position:relative;}
    #qtranslate-chooser{ margin-top: -50px;
    padding: 0;
    position: absolute;
    right: 20px;
    width: 150px;}
    #qtranslate-chooser li{display: inline-block;list-style-type: none;margin-right: 20px;}

    #topmenu{ width:998px; border:1px solid #ececec; background:#fff; height:60px; text-align:center; border-bottom:12px solid #ececec;}

    Edit: I just noticed that the flags are floating beneath the header, when scrolling down the page :D

  4. Towfiq I.
    Member
    Posted 2 years ago #

    add this to your stylesheet too:

    #qtranslate-chooser{width:180px!important; top:0px;}

  5. Niels V.
    Member
    Posted 2 years ago #

    Done. No changes though.

  6. Towfiq I.
    Member
    Posted 2 years ago #

    press ctrl+f5 for a hard refresh and you will see the change.

  7. Niels V.
    Member
    Posted 2 years ago #

    Incredible! Thank you once again! :D

    Now I only have one problem regarding the header left. I'll make a new topic. Should be an easy fix!

  8. Niels V.
    Member
    Posted 2 years ago #

    I've made a topic about the last header-problem here

  9. Lolo
    Member
    Posted 1 year ago #

    It's great!
    Only little problem now (and I see the same problem on your site, Niels) is the flags are floating on top of the menu on the mobile version (at least on iPhone):
    see my website
    How do I create a code so that the flags do not appear at all on the mobile version? I want to use the dropdown menu only on mobile. Is it possible?

  10. Towfiq I.
    Member
    Posted 1 year ago #

    you can add both the dropdown version and the lag version and then hide the dropdown version in the desktop version and show the flag version and in mobile website you can hide the flag version and display the flag.

    Add both the flag code and the dropdown code and let me know.
    and also let me know where you want the dropdown on the mobile site.

  11. Lolo
    Member
    Posted 1 year ago #

    OK I added the dropdown version in the bottom and the flags at the top. The positions are ok with me. It looks fine on the desktop version. Now I just want to hide the flags in the mobile version, but I don't know how to do that.

  12. Towfiq I.
    Member
    Posted 1 year ago #

    add this to your mobile.css file:

    #qtranslate-chooser{display:none;}

  13. Lolo
    Member
    Posted 1 year ago #

    Perfect! Thank you so much.

Topic Closed

This topic has been closed to new replies.

About this Topic