Return to previous page

Help to display header topmenu together with WPML

This topic has 6 replies, 2 voices, and was last updated 9 years, 3 months ago ago by Eva Kemp

groubee

Participant

September 13, 2015 at 01:12

Hi

I hope you can help me with some css to display WPML language menu in the header topmenu.

See how it looks now: http://dev-smooff.serv10.powerhosting.dk/

See how we would love it so be: https://www.dropbox.com/s/5f07yememmpo93h/header-language-menu-design.jpg?dl=0

– the menu text should be align with text inside the language menu dropdown box – and the language inside the dropbox should also be aligh(middle) with the flag icon.

– the box color should be transparent, white on mouseover. And is it not possible to make it smaller, not so long as now?

I really hope you can help me.

Best regards
Tonny

#86438 Copied

5 Answers
Eva Kemp

Support staff

September 14, 2015 at 10:17
Hello,

Please use this css code:
```
.languages-area #lang_sel_click li, .languages-area #lang_sel_click ul ul {
   width: 100px !important;
}
.languages-area #lang_sel_click img.iclflag {
   top: -1px;
}
.languages-area .widget_icl_lang_sel_widget {
    padding-top: 0px;
    margin-top: -3px;
}
#lang_sel_click a {
   background-color: transparent !important;
}
#lang_sel_click a:hover {
   background-color: white !important;
}
```
Regards,
Eva Kemp.
#86567 Copied
groubee

Participant

September 14, 2015 at 13:39

Great Eva – I love your support!! 🙂

I just have some few more things I hope you can help me with?
See
https://www.dropbox.com/s/wg2rl5sneftovy7/header-language-menu-designV2.jpg?dl=0

– The white “pin” between “My account” and “logout”… can it be in the same color as the text?

– Would it be possible to add one more “pin between “Logout” and add the text “Language:”?

– Would it be possible to remove the WPML box border – and only show it on mouseover

– And remove the “My account” and “Logout” if the burger menu is shown + center “Language:+box” ? 🙂

This would be SUPER nice!!!

best regards
Tonny

#86642 Copied
Eva Kemp

Support staff

September 14, 2015 at 17:51
Hello,

Please use this code:
```
.links li:after {
  background-color: #000;
}
```
In this case you need edit the file wp-content/themes/woopress/framework/theme-functions.php (from line 901) and add the code you need.

Add this code to remove the border:
```
#lang_sel_click a {
  border: none;
}
#lang_sel_click a:hover {
    border: 1px solid #CDCDCD;
}
```
Do you mean you want to remove the “My account” and “Logout” links on mobile?

Regards,
Eva Kemp.
#86736 Copied
groubee

Participant

September 14, 2015 at 18:07

Thanks a lot, I will try it now

– Yes, when the Burger menu is shown(on mobile), the “My account” and “Logout/login” is shown inside the burger menu and that is super – therefore it would be great to remove them from the header top.

#86750 Copied
Eva Kemp

Support staff

September 14, 2015 at 20:28
Hello,

Please add this code in custom.css:
```
@media (max-width: 992px) {.top-links {
   display: none;
}}
```
Regards,
Eva Kemp.
#86805 Copied
Tagged: display, header, help, topmenu, woocommerce, wordpress, wpml
Viewing 6 results - 1 through 6 (of 6 total)