[Resolved] Adjust language switcher

Home Forums Support [Resolved] Adjust language switcher

Home Forums Support Adjust language switcher

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2267951
    Matthias

    Hi there,

    i am trying to design a language switcher i added to my menu a little – so far i couldnt find a solution to get it working myself.

    I am trying:
    1. To adjust the space between the languages (currently there is quite a margin between them
    2. add a separator ( | ) beween languages ( i plan to add a third so EN | DE | XY would be nice
    3. in mobile the languages are below each other. Is there a way to have them in a row – same as in 2. (EN | DE | XY)

    #2267976
    David
    Staff
    Customer Support

    Hi there,

    1. Reduce space between language switcher items:

    .main-navigation .main-nav ul li.wpml-ls-item a {
        padding-left: 10px;
        padding-right: 10px;
    }

    2. Add separator between menu items:

    .main-navigation .main-nav ul li:last-child:before {
        content: '';
        position: absolute;
        left: 0;
        top: calc(50% - 10px);
        height: 18px;
        width: 1px;
        background-color: #fff;
    }

    When you add the third item, change this:

    .main-navigation .main-nav ul li:last-child:before {

    to:

    .main-navigation .main-nav ul li:nth-last-child(-n+2):before {

    3. Inline the wpml items in off canvasm menu:

    #generate-slideout-menu .slideout-menu {
        justify-content: center;
    }
    #generate-slideout-menu .slideout-menu li.wpml-ls-item {
        flex: 0 1;
    }
    #2268287
    Matthias

    thx – works almost.

    I now am adding a 3rd language – but

    .main-navigation .main-nav ul li:nth-last-child(-n+2) {
        content: '';
        position: absolute;
        left: 0;
        top: calc(50% - 10px);
        height: 18px;
        width: 1px;
        background-color: #fff;
    }

    Leads to showing only “EN” instead of EN | DE | ES.

    #2268382
    David
    Staff
    Customer Support

    Opps updated the code to:

    .main-navigation .main-nav ul li:nth-last-child(-n+2):before {

    #2268999
    Matthias

    awesome. thank you.

    #2269011
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.