Zenon Lite multilingual header problem (flags)

  • Resolved Niels V.

    (@niels-v)


    12 years, 3 months 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!

    https://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!

Viewing 12 replies - 1 through 12 (of 12 total)

  • 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;}

    Thread Starter Niels V.

    (@niels-v)

    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 ??

    add this to your stylesheet too:

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

    Thread Starter Niels V.

    (@niels-v)

    Done. No changes though.

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

    Thread Starter Niels V.

    (@niels-v)

    Incredible! Thank you once again! ??

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

    Thread Starter Niels V.

    (@niels-v)

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

    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?

    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.

    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.

    add this to your mobile.css file:

    #qtranslate-chooser{display:none;}

    Perfect! Thank you so much.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Zenon Lite multilingual header problem (flags)’ is closed to new replies.