WPML Language switcher horizontal in burger menu. - Support

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
April 23, 2018 at 10:14 pm #945579

kirillko
Participant

Hello,
Could you advice me CSS code to make the burger menu items the following:
1. Instead of 1 column 3 rows => 3 columns 1 row *I managed to achieve this in Dev Console.
2. Set the columns width to fit nicely. *need your help.

Current:
https://www.dropbox.com/s/01pgx3rs68fd3gk/Screenshot%202018-04-23%2023.08.50.png?dl=0

Expected:
Column items are located closely nicely to each other, currently there is is huge gap / padding between them.

Thanks!
Kirill

April 26, 2018 at 2:48 am #947006
Ismael
Moderator
Hey kirillko,

Thank you for using Enfold.

The following css code should center align the language switcher.
```
.html_av-overlay-full #top #header #av-burger-menu-ul > li.wpml-ls-item {
    width: 50px;
    display: block;
    left: 50% !important;
    position: absolute !important;
    float: none;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    top: 90px !important;
}

.html_av-overlay-full #top #header #av-burger-menu-ul > li.wpml-ls-item > * {
    display: table-cell;
}

.html_av-overlay-full #top #header #av-burger-menu-ul > li.wpml-ls-item > .sub-menu {
    width: 100px;
}

.html_av-overlay-full #top #header #av-burger-menu-ul > li.wpml-ls-item > .sub-menu li {
    display: table-cell;
}
```
You may need to add css media queries to adjust these values for smaller screens.

Best regards,
Ismael
March 1, 2019 at 12:38 pm #1073123

dsulkowski
Participant

This is exactly I’m looking for. What changes did you make except css?

March 2, 2019 at 5:00 am #1073498
Ismael
Moderator
Hi,

This is OP’s site.
```
weloveit dot ee
```
Looking at the site should give you ideas about the site’s theme config.

Best regards,
Ismael
August 18, 2021 at 12:53 pm #1317329

UPON
Participant

Dear Ismael,
i tried your code. I have 2 languages active. With your code above the menu (DE and EN) are now overlapping each other. Would be great you have a look. I would like to have DE and EN in the burger menu horizontal, next to each other.
Thanks!

August 20, 2021 at 11:44 am #1317603
Ismael
Moderator
Hi,

Thank you for following up.

Try to use this css code to separate the language switchers, or to create space between them.
```
.html_av-overlay-full #top #header #av-burger-menu-ul > .wpml-ls-item.wpml-ls-item-de {
    margin-left: -20px;
}

.html_av-overlay-full #top #header #av-burger-menu-ul > .wpml-ls-item.wpml-ls-item-en {
    margin-left: 20px;
}
```
Please create another thread if you require more assistance. We will close this thread for now.

Best regards,
Ismael
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘WPML Language switcher horizontal in burger menu.’ is closed to new replies.