mqtranslate – put language switcher in header

  • Hi,

    I am trying to put the language switcher in my header. I use a one-page-template with no widget area.

    The URL is test.steffi-woessner.de (will be moved to steffi-woessner.de)

    There were two positions I could imagine the switcher to be:

    1. underneath the social icons, centered
    2. in the sticky menu showing up when you scroll down, floating right

    Unfortunately I know only little CSS.

    I managed to put the switcher (only inactive languages) in the header by trial and error:

    </div> <!– end social –>
    <?php echo qtrans_generateLanguageSelectCode(‘image’); ?>
    </div> <!– end title –>

    and in the css sheet

    ul.qtrans_language_chooser > .active {
    display:none;
    }

    However, I have no clue how to center the icons and put them horizontally in one line.

    I tried entering this in my css sheet but that puts them to the left and one under the other

    .qts-lang-menu { list-style-type:none; float:right }

    .qts-lang-menu li {
    display: inline;
    }

    Can someone help me style them correctly?

    I will then replace the ugly little flags with different images, bigger ones, too.

    Second question for that: I have a custom CSS field in my theme settings. Would putting the CSS info there prevent the changes from getting lost once I update?

    Third question: any idea how to put the flags on the right of my sticky nav2 menu??

    Thank you so much!

    https://www.ads-software.com/plugins/mqtranslate/

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

  • This might help to place them horizontal:
    .qtrans_language_chooser li { float:left; margin-right:3px }

    2nd question: Yes, it will be safer to do changes in the custom CSS field

    3rd question. You should check that with your theme creator or try to find out the php file where that nav menu is placed. It might be page.php or header.php… and place the <?php echo qtrans_generateLanguageSelectCode(‘image’); ?> code there.

    Hope it helps

    Thread Starter petiteprof79

    (@petiteprof79)

    Hi anallabres,

    thank you! It did help in placing them horizontally. I will get them further apart by making the transparent background of the new languages flags bigger I guess. Do you happen to know how to center them, too?

    Will put the CSS changes into the custom CSS field then and look for the sticky header.

    Is there any way I can center the language switcher in the header and have it on the right of the sticky menu (in-line with the menu) or will they automatically appear both the same way?

    Thread Starter petiteprof79

    (@petiteprof79)

    Yet one more question: since I am using a one-page template my menu items refer to, for example

    https://test.steffi-woessner.de/#skills

    using the hashtag to move to the right section of the page.

    However, even though I can switch between languages by clicking on the flags, as soon as I click on a menu item it flips back to my default language. Will qtranslate slug help with that or is there any other way to have the menu link to the appropriate language.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘mqtranslate – put language switcher in header’ is closed to new replies.