WPML flags at header social icons position

Since the support team seems a bit swamped with so many requests, I did some research and I achieved (nearly) what I want.
I activated the header secondary menu and made the “built-in to Enfold” language flags appear. Then I used the following CSS I found in another post with some tweaks to my header:

@media only screen and (min-width: 768px) {
.sub_menu {
    position: absolute !important;
    top: 85px !important;
    right: 120px !important;
}
}

.header-scrolled .avia_wpml_language_switch.avia_wpml_language_switch_extra {
top: -32px;
}

#top ul.avia_wpml_language_switch li {
    margin: 0px 10px 0px 5px;
}

I don’t know if I made any mistakes or if I could make the code better but it seems to work.
What I would finally want to achieve is to remove the black strip of the secondary menu but keep it for the language flags when it goes into mobile view.

Also I noticed that the social menu icons disappear when the layout jumps into mobile menu view.

I am attaching some screenshots to indicate the above. I hope they help and I hope you will help.

Thanks

Thank you for the reply Yigit.
The code you provided has indeed removed the top socket but only in desktop viewport. When going into 767px or less a black bar appears beneath the header and above the slider. The same and even bigger bar shows up if you resize the site in less pixels. See attached screenshots.
Any ideas?

Hey Yigit,
Unfortunately the code didn’t work so I disabled it. I am creating credentials to log in and have a look.

Regards,
Manou

Hi Yigit,
I did all that but the black bar of the secondary header menu is still there. Maybe you cannot see it because it is black.
I’ll change it to orange to see what I mean.
Thank you

Thank you Ismael,
Your code worked fine and I had to adjust some things using the below CSS

To fix the header padding when in tablet sized viewport:

@media only screen and (max-width: 990px) and (min-width: 768px) {
.html_header_top.html_header_topbar_active.html_header_sticky.html_large.html_bottom_nav_header #top #main { padding-top: 118px !important; }}

To “call” the black bar for the language flags when in mobile view:

@media only screen and (max-width: 768px) {
#header_meta, #header_meta .container {
    min-height: 30px;
    height: 30px; }}

To adjust the padding of the flags in header scrolled:

.header-scrolled .avia_wpml_language_switch.avia_wpml_language_switch_extra {
top: -62px !important; }

Hope this helps someone out there.
Thanks!