This topic has 11 replies, 3 voices, and was last updated 8 years, 6 months ago ago by Eva Kemp
Hi Guys,
I require some assistance with the ffg: I need to move the selector in the menu to between the menu and search icon. Also how would I adjust it differently on tablet and mobile as it blocks out the search icon in its current position when viewed on a device.
Please see attached and private section for link.
Thank You Kindly
Hello,
Please add this code in Theme Options > Custom CSS > Custom CSS for desktop:
.languages-area {
float: left;
margin-right: 150px !important;
}
and use this code in Custom CSS for mobile:
.languages-area {
margin-top: 30px !important;
}
Best regards,
Jack Richardson.
Hi Jack,
I tried the code but it did not suit my needs due to changes that were made to menu. I used the code below though:
.languages-area {
float: right;
height: 1px !important;
position:relative;
top:30px;right:0px;
padding: 7px 0px !important;
margin-right: 35px !important;
}
The Desktop version works perfectly however when it scales down to 1024×768 it does not display correctly http://prntscr.com/8j5w9c
Coincidentally it looks the same on iPad and Android tablet. If possible could it move up above the search icon
With the mobile would it be possible to move the switcher into the mobile menu?
Thank You
Regards
Zunaid
Good Day, please may I have a response to this.
Thank You
Hi, it has been 5 days since i submitted my reply and I still have not had any feedback.
Please advise urgently.
Still waiting, another 5 hours later?
IT IS NOW 6 DAYS LATER?????
Hello,
We are sorry for a long delay.
Please add this code in Custom CSS for desktop:
.navbar-collapse {
padding-left: 0px;
}
.header-logo {
max-width: 240px !important;
}
Unfortunately switcher can’t be moved to mobile menu.
Best regards,
Jack Richardson.
Hi, no problem. The above solution didnt seem to work.
What I have done however is use different css for each device i.e Desktop, Tablet and Mobile
What happens though is that between the ffg sizes +-1200 to +-964px the menu gets cut off. Please advise as to what selector i can use to fix the language selector for above sizes.
Desktop:
.languages-area {
float: right;
height: 1px !important;
position:relative;
top:30px;right:0px;
padding: 7px 0px !important;
margin-right: 35px !important;
}
Tablet:
}
.languages-area {
float: right;
height: 1px !important;
position:relative;
top:0px;right:-20px;
padding: 7px 0px !important;
margin-right: 35px !important;
}
Mobile Landscape:
}
.languages-area {
float: right;
height: 1px !important;
position:relative;
top:0px;right:-20px;
padding: 7px 0px !important;
margin-right: 35px !important;
}
Mobile Portrait:
}
.languages-area {
float: left;
height: 1px !important;
position:relative;
top:0px;left:130px;
padding: 10px 0px !important;
}
http://quirktools.com/screenfly/ – I use that to test sizes.
Thanks
Hi, so i have managed to fix all my issues. Just one remains…please assist
When viewing site on iPad or any device at the 768×1024 resolution (Portrait on tablets) the language selector moves to the left. I used the code below to fix the issue on 1024 x 768 where it cuts off the menu.
Please view link in private content
@media only screen and (max-width: 1199px){
.languages-area {
float: right;
height: 5px !important;
position:relative;
top:0px;right:-25px;
padding: 7px 0px !important;
margin-right: 35px !important;
}
Thank You
Hello,
Please try to use this code in custom.css:
@media only screen and (max-width: 992px) { .languages-area {
float: right;
margin-bottom: -50px;
}}
Regards,
Eva Kemp.
You must be logged in to reply to this topic.Log in/Sign up