Archived topic
Adjust language switcher
5 replies · Started by Matthias on June 29, 2022
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)
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;
}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.
Opps updated the code to:
.main-navigation .main-nav ul li:nth-last-child(-n+2):before {
awesome. thank you.
You're welcome
