Language selector display bug

Hello, it seems that I also have the same problem.

But in my case the flag stay at right side with a big space. In @ovidiudruta the flag is at left side.

Can you please check it at https://rentcarcascais.com/

Thanks!

Hello @ovidiudruta and @lmsm76,

I think the issue with the main menu might be caused by the way those menus are styled in the theme’s CSS file.

Can you both please change your theme to the default Twenty Twenty-One theme?

I’m going to post an image with how the menu language switcher looks with this theme and it should be the same for you as well: https://drive.google.com/file/d/1-9j4OnCeQtSh8mEGs19esZ6Jkj8zY6qi/view?usp=sharing

What you can do to try and solve this issue is to add additional CSS which will give you the desired outcome.

You need to add the CSS via your Customizer interface: WordPress -> Appearance -> Customize -> Additional CSS

In @ovidiudruta case, I think the code should be something like this:

.nav li ul {
width: auto;
min-width: 100px;
left: -40px;
}

#top-menu li li a {
width: auto;
min-width: 100px;
}

The outcome can be seen in this image: https://drive.google.com/file/d/1PosX6tU_07dwkzgiOkreSbmZ68GHXm7_/view?usp=sharing
You can change its position with the left value.

In @lmsm76 case, I think the code should be something like this:

header.header.transparent-header nav.navbar.navbar-default .navbar-nav li .dropdown-menu {
width: auto;
min-width: 70px;
}

.navbar .navbar-nav .dropdown-menu a span {
float: left;
padding-bottom: 10px;
}

The outcome can be seen in this image: https://drive.google.com/file/d/1IvZJeX5X20LncTvV58aVbVvq0-UTKhYw/view?usp=sharing

You can also add a “left: -16px;” value to the first CSS to place it right under the current lag.
header.header.transparent-header nav.navbar.navbar-default .navbar-nav li .dropdown-menu {
width: auto;
min-width: 70px;
left: -16px;
}

Those suggestions are meant only for the way your menu is now. In case you will add other submenu elements, I’m not sure if the result will be what you want.

Going back to @ovidiudruta, as for why the language switcher works like that in the footer, I think it might have something to do with how you inserted it there. If you use a menu widget to insert it in one of the footer columns, the result will be as you would expect, but I think you used a Divi element for that (?). I might be wrong about that, but maybe there is an issue with that element.

The Shortcode langauge switcher shouldn’t look and behave the way it does for you. I’m not sure why it does that in your case. Maybe there is some CSS that’s affecting it.

Best regards,
Cristian

• This reply was modified 3 years, 7 months ago by Cristian Draghia.

Hello @cristiandraghia it perfectly worked for me. Many thanks!

Glad to hear this,
Have a nice day ahead!