Return to previous page

Left side top bar area not visible in responsive?

This topic has 12 replies, 2 voices, and was last updated 5 years, 8 months ago ago by Rose Tyler

d4r1uzzo

Participant

July 30, 2018 at 15:36

Hello,

the left side top bar area is not visible in the responsive version of the template? I can not see the widget with the language selector used.

Greetings,
Dario

Please, contact administrator
for this information.

#197487 Copied

11 Answers
Rose Tyler

Support staff

July 30, 2018 at 15:44
Hello,

Please try to add this code in Global Custom css:
```
@media only screen and (max-width: 1030px){
.top-bar {
    display: block;
}
.top-bar .languages-area {
    display: block;
    max-width: 100%;
    text-align: center;
    width: 100%;
    float: none;
}
.top-bar .top-links .topbar-widget {
    display: inline-block;
}
.top-bar .top-links {
    width: 100%;
    max-width: 100%;
    text-align: center;
}
.top-links ul {
    float: none;
}
.top-bar .show-in-tb-right {
    margin: 0px;
    padding: 0px !important;
}
}
.top-bar .top-bar .languages-area .widget_icl_lang_sel_widget {
    margin-right: 0px;
}
.top-bar .wpml-ls-sidebars-languages-sidebar.wpml-ls.wpml-ls-legacy-list-horizontal, .top-bar .wpml-ls-legacy-list-horizontal a {
    padding-right: 0px;
}
```
Regards
#197489 Copied
d4r1uzzo

Participant

July 31, 2018 at 09:14

Hello,
the code works but graphically I do not like the top bar in the responsive version and I have moved the flags in the menu. How do I approach them and remove the menu hover?

Another piece of information: I put custom flags as I can to change width and height?

Link in the private area

Greetings,
Dario

Please, contact administrator
for this information.

#197519 Copied

Rose Tyler

Support staff

July 31, 2018 at 09:30

Hello,

Please describe the desired result in more details with screenshots for better understanding.

Regards

#197520 Copied

d4r1uzzo

Participant

July 31, 2018 at 09:57

Of course

http://i.prntscr.com/S7rAgxnJSW2lPGRCkXMLLw.jpg

I highlighted how I would like the flags to appear

Greetings

#197522 Copied
Rose Tyler

Support staff

July 31, 2018 at 10:17
Please try this code:
```
.wpml-ls-menu-item .item-link {
    padding: 0px !important;
}
.wpml-ls-menu-item{
    padding-left: 5px !important;
    padding-right: 5px !important;
}
```
Regards
#197525 Copied
d4r1uzzo

Participant

July 31, 2018 at 10:41

ok it works,

now I should approach the flags also in the responsive version

now:

http://i.prntscr.com/lkEa5CCPQiWP6f60cuDwPw.jpg

as I would like

http://i.prntscr.com/TVFIoIY8TC2i34wbMmurmQ.jpg

Greetings

#197526 Copied
Rose Tyler

Support staff

July 31, 2018 at 10:47
```
.mobile-menu-wrapper .wpml-ls-menu-item a {
    padding-left: 30px !important;
}
```
Regards
#197527 Copied
d4r1uzzo

Participant

July 31, 2018 at 12:59

ok, I hope to ask the last two things:

1) how to enlarge the size of the flags

2) in the responsive version if you can approach the flags vertically (http://i.prntscr.com/v0Ns5NX8Rhy3e2YYibGPwA.jpg)

Greetings

#197534 Copied
Rose Tyler

Support staff

July 31, 2018 at 13:06
1.
```
.wpml-ls-menu-item .wpml-ls-flag {
    width: 20px;
    height:  auto;
}
```
2.
```
.mobile-menu-wrapper .menu .wpml-ls-menu-item > a {
    line-height: 2 !important;
}
```
Regards
#197535 Copied
d4r1uzzo

Participant

July 31, 2018 at 13:25

Thank you so much for your patience.

Greetings,
Dario

#197536 Copied

Rose Tyler

Support staff

July 31, 2018 at 13:29

You’re welcome!

Regards

#197537 Copied
Viewing 12 results - 1 through 12 (of 12 total)