Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Flexform › WPML-language switcher in main-navigation
New Landing › How can we help? › Themeforest Theme Support › Flexform › WPML-language switcher in main-navigation
- This topic has 17 replies, 3 voices, and was last updated 9 years by Mohammad – SUPPORT.
-
Posted in: Flexform
-
June 24, 2015 at 4:54 pm #188180
Hello Support-Team
I have a problem with the wpml-language switcher.
I’ve created a horizontal language-switcher in the WP-Mainmenu. Now I’m trying to move these switcher to the right side. That means the main-navigation should stay on the left side and the language-switcher should move to the right side (see attached screenshoot).
I have tried a lot of custom css – in the Flexform Theme Options as well as in the wpml settings – unfortunately without success. Has anybody an idea?
Thank you very much for your help and kind regards.
AchimAttachments:
You must be logged in to view attached files.June 25, 2015 at 8:21 am #188343Hi,
Please use this custom css code:-
li.menu-item-language{float:right !important;}
Thanks 🙂
With Best Regards
MohammadJune 25, 2015 at 9:28 am #188387Hi Mohammad
Thank you very much for your answer. I’ve use the css code and now the language switcher is on the right side. There are two things which I want to change:
1. Now the active Language moves to the right side.
Can we create a css-code or change on of the flex form php-files that the order of the language-list always stay the same? (DE EN ES PT)(In the wpml configuration I have choose, that the active language is colored green.
It seems, that flexform ignore the wpml configs.)2. As you can see on the attached screenshoot, the navigation isn’t flush with the image (on the left side and on the right side, too). Is it possible to change that?
Thank you very much, Mohammad and have a nice day.
AchimAttachments:
You must be logged in to view attached files.June 25, 2015 at 11:13 am #188449Hi,
Please remove last css code:-
li.menu-item-language:first-child{margin-left:46% !important;}
li.menu-item-language-current > a{color:#317930 !important}
Thanks 🙂
With Best Regards
MohammadJune 25, 2015 at 12:51 pm #188538Hey Mohammad
Thank you for the codes. I have try your custom css an with the following versions, it works
/* Full width menu code */
#nav-section{
width: 98%!important;
}li.menu-item-language-current > a{
color:#317930 !important
}li.menu-item-language{
float:right !important;
}Do you think we’ll solve the problem, that the arrangement of the languages will always be the same, no matter which one is choosen (DE EN ES PT)? At the moment every time you chose a language, the chosen one moves to the right.
If you can do this last thing for me, you make my day!
Kind regards
AchimAttachments:
You must be logged in to view attached files.June 25, 2015 at 12:54 pm #188541Hi,
Please remove this code:-
li.menu-item-language{
float:right !important;
}-Mohammad
June 25, 2015 at 1:11 pm #188555Hey Mohammad
Sorry, but if I remove this one, the language-switcher tuns back to left behind the main-navigation.
Is there a bug in one of my other custom css-codes?
#header-section{
padding: 0 0 !important;
border: none;
}/* Full width logo code */
#header-section #logo{
width: 100%;
float: center;
}#header-section #logo img, #header-section #logo img.retina{
margin: 0 auto;
float: center;
width: 200px; /*adjust as necessary*/;
}/* Full width menu code */
#nav-section{
width: 98%!important;
}li.menu-item-language{
float:right !important;
}li.menu-item-language-current > a{
color:#317930 !important
}nav .menu ul li{
font-size:14px;
font-family: Source Sans Pro;
font-weight: 400;
}nav .menu ul{
background: rgba(255, 255, 255, 0.8);
border:0px;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;
}#main-navigation{
float: none;
width: 100%;
height: 48px;
text-align: left;
}nav .menu li{
float: none;
}.nav-wrap{
float: none!important;
}/* Responsive code */
@media only screen and (max-width: 767px) {
#header-section #logo img, #header-section #logo img.retina {
margin-bottom: 20px;
}@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300,700);
Thank you
AchimJune 25, 2015 at 1:42 pm #188586Hi,
You forgot to insert this custom css code:-
li.menu-item-language:first-child{margin-left:46% !important;}
-Mohammad
June 25, 2015 at 2:23 pm #188629Hello again, Mohammad
I’ve put the code in but nothing change.
So I think, that do not solve the problem.
Any other Ideas?Thank you for your patience!
June 25, 2015 at 4:55 pm #188717Try to clear your browser cache and check again.
June 26, 2015 at 8:11 am #188870Good Morning, Mohammad,
Hello Support-TeamI have cleared the browser cache but nothing change. (www.aguaverde.ch/wordpress)
If you chose one language, the position always change to the right side.
<span id=”result_box” class=”short_text” lang=”en”><span class=”hps”>Desired</span> <span class=”hps”>situation: the order of the languages are fixed (DE EN ES PT).</span></span>Following the compled custom-css-codes:
#header-section{
padding: 0 0 !important;
border: none;
}/* Full width logo code */
#header-section #logo{
width: 100%;
float: center;
}#header-section #logo img, #header-section #logo img.retina{
margin: 0 auto;
float: center;
width: 200px; /*adjust as necessary*/;
}/* Full width menu code */
#nav-section{
width: 98%!important;
}li.menu-item-language{
float:right !important;
}li.menu-item-language:first-child{
margin-left:46% !important;
}li.menu-item-language-current > a{
color:#317930 !important
}nav .menu ul li{
font-size:14px;
font-family: Source Sans Pro;
font-weight: 400;
}nav .menu ul{
background: rgba(255, 255, 255, 0.8);
border:0px;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff,endColorstr=#26ffffff);
zoom: 1;
}#main-navigation{
float: none;
width: 100%;
height: 48px;
text-align: left;
}nav .menu li{
float: none;
}.nav-wrap{
float: none!important;
}/* Responsive code */
@media only screen and (max-width: 767px) {
#header-section #logo img, #header-section #logo img.retina {
margin-bottom: 20px;
}@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300,700);
Thanx
AchimJune 26, 2015 at 8:33 am #188885Hi,
Please check it now.
-Mohammad
June 26, 2015 at 9:00 am #188904…. Sorry, but they are still moving… 🙁
I’ve cleared all the browser caches (safari, firefox, chome).
The result is always the same.
Sorry for that…June 26, 2015 at 11:11 am #188994Hi,
I cant believe. Please check my screenshot.
-Mohammad
Attachments:
You must be logged in to view attached files.June 26, 2015 at 12:06 pm #189037Hi Mohammad
I’m afraid that was a misunderstanding….?!
The position from the language switcher is ok (look at my screenshots).
But if you chose one language, the the order of languages is changing.
Situation at the moment, if you are choose…German = <span style=”color: #339966;”>DE</span> EN ES PT
English = <span style=”color: #339966;”>EN <span style=”color: #000000;”>DE ES PT
Spanish = <span style=”color: #339966;”>ES</span> DE ES PT
Portuguese = <span style=”color: #339966;”>PT</span> ES EN DE</span></span>
I would prefer:German = <span style=”color: #339966;”>DE</span> EN ES PT
English = DE <span style=”color: #339966;”>EN</span> ES PT
Spanish = DE EN <span style=”color: #339966;”>ES</span> PT
Portuguese = DE EN ES <span style=”color: #339966;”>PT</span>Kindest regards
AchimAttachments:
You must be logged in to view attached files. -
Posted in: Flexform
You must be logged in and have valid license to reply to this topic.