Solved General

How to edit the position of the flags in Language Switcher Module

Asked by Anders Ekman 5 years ago Last activity 5 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;"?

Accepted answer

Marked as the solution

Muntasir Sakib Staff

5 years ago · edited

Hello there,

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

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

Thanks!

6 more replies

Muntasir Sakib Staff

5 years ago

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!

Anders Ekman Asked this

5 years ago

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]

Muntasir Sakib Staff

5 years ago

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!

Anders Ekman Asked this

5 years ago

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?

Anders Ekman Asked this

5 years ago

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!

Muntasir Sakib Staff

5 years ago

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!

In the docs