How To Edit The Position Of The Flags In Language Switcher Module - Question | JoomShaper

How To Edit The Position Of The Flags In Language Switcher Module

AE

Anders Ekman

General 2 years ago

Hello,

I am trying to change the position of the flags in the Language Switcher but don't know how. The language switcher is placed in the offcanvas menu and the two flags are on two different rows instead of on the same row. The code to change this I think is "flex-direction:row;", because it is now on "flex-direction:column;", but I don't know where in the code I change it?

What the Language Switcher looks like in the offcanvas menu: [https://ibb.co/f4NX374]

The class containing the pictures ("lang-inline"): [https://ibb.co/VmD314r]

The class containing the pictures ("lang-inline") after I added the code "flex-direction:row;" to the "element-style": [https://ibb.co/9sDCWjL]

As you can see on this last picture, the flags are now positioned on the same row, just as I want it. The "element-style" code 'overwrites' the code from the ".offcanvas-menu .offcanvas-inner .sp-module ul" (where the flex-direction is column). The question is, where do I add this "flex-direction:row;" code (that I put in "element-style", so that it overwrites the "flex-direction:column;"?

0
7 Answers
Muntasir Sakib
Muntasir Sakib
Accepted Answer
Support Agent 2 years ago #26647

Hello there,

Please use the following code and let us know the update.

ul.lang-inline{
flex-direction: row !important;
}

Thanks!

0
Muntasir Sakib
Muntasir Sakib
Accepted Answer
Support Agent 2 years ago #26634

Hello there,

We are glad to know that you have come up with your findings as well.

Please, put the css inside Extensions > Templates > Your Template > Template Options > Custom Code > Custom CSS section. Hopefully, that will fix the issue for you.

Thanks!

0
AE
Anders Ekman
Accepted Answer
2 years ago #26641

Hello,

Thank you for such fast response. I tried entering the code in the custom css but nothing changed. I don't know if I entered the wrong code so that it doesn't know which class to add the changes to. I'll attach some images of the codes that I tried entering.

The first custom css code I added: [https://ibb.co/xm3Dq5F]

The second custom css code I added: [https://ibb.co/HNGXNT3]

0
Muntasir Sakib
Muntasir Sakib
Accepted Answer
Support Agent 2 years ago #26643

Hello there,

I am sorry to say but the code is wrong. Please share your site URL with us so that we can have a look at it.

Thanks!

0
AE
Anders Ekman
Accepted Answer
2 years ago #26645

Hello,

The website is currently offline so I can't send the URL. Do you know what code I have to enter in order to fix this?

0
AE
Anders Ekman
Accepted Answer
2 years ago #26653

Hello,

I tried entering the code you sent me but then the entire offcanvas-menu got affected, I guess because the menu items are also connected to ".offcanvas-menu .offcanvas-inner .sp-module". I'll attach an image of how it looked like.

How it looked like after entering the code you sent me: [https://ibb.co/0QfY6zL]

I then realized I could just add {flex-direction: row !important;} to the "ul.lang-inline", instead of to all the different ".offcanvas-menu .offcanvas-inner .sp-module" (which would affect more than just the flags of the language switcher). So I did so and got the following result:

How it looked like after altering the code you sent me and only using a certain part of it: [https://ibb.co/VD2Gy5v]

Before I asked for help on this forum I had entered "ul.lang-inline{flex-direction: row;}" in the css files, but that didn't work. Although now I know that the code that was missing for it to work was to add "!important".

Long story short, now it works. Thank you!

0
Muntasir Sakib
Muntasir Sakib
Accepted Answer
Support Agent 2 years ago #26655

Hello there,

Yes! You are right, the css is edited and you can see the exact css that works in this case. We are glad to know that your issue is fixed.

Please accept the most suitable answer so that the others can find it as well.

Have a nice day!

0