Return to previous page

Mobile top banner - by smartrobbie - on WordPress WooCommerce support

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

smartrobbie

Participant

July 1, 2016 at 02:25
hi, I added some code in from a previous ticket to have my account etc on the top bar on mobile.

on mobile portrait looks good

on table landscape looks good

is there a way I can change it so that on mobile landscape and on ipad portrait, the top bar looks like the desktop version. e.g. the social icons are on the left of the screen and them my account links are on the right of the screen? this applies only to mobile landscape and ipad portrait. just dont think the top bar on these 2 need to be so wide as there is space.

this is the code I have at the moment.

custom css for tablet:
```
.template-container .top-bar .top-links {
    display: block;
    float: right;
    margin-right: 24%;
    margin-top: 5%;
}

.row-count-3 .product:nth-child(3n+1) {
    clear: none !important;
    height: 480px;
}
```
custom css for mobile landscape
```
.template-container .top-bar .top-links {
    display: block;
    float: right;
    margin-right: 22%;
    margin-top: 10%;
}

.row-count-3 .product:nth-child(2n+1) {
    clear: none !important;
    height: 430px;
}
```
custom css mobile
```
.template-container .top-bar .top-links {
display: block;
float: right;
margin-right: 5%;
}

.row-count-3 .product:nth-child(2n+1) {
    clear: none !important;
    height: 430px;
}
```
#132015 Copied
5 Answers
Eva Kemp

Support staff

July 1, 2016 at 09:35
Hello,

Try to use this code in Custom CSS for mobile landscape:
```
.top-bar .languages-area {
   left: 10%;
}
.template-container .top-bar .top-links {
    margin-right: 0 !important;
    margin-top: 0 !important;
}
```
and this code for Custom CSS for tablet:
```
.template-container .top-bar .top-links {
    margin-right: 0 !important;
    margin-top: 0 !important;
}
```
Regards,
Eva Kemp.
#132066 Copied
smartrobbie

Participant

July 2, 2016 at 05:26

i just had to keep display: block; in the code.

on ipad portrait and iphone landscape, the top bar is very high. is there a way to reduce the hight on these 2?

thanks,

Robyn

#132186 Copied
Eva Kemp

Support staff

July 2, 2016 at 08:10
Hello,

Add this code in Custom CSS for mobile landscape and Custom CSS for tablet:
```
.header-type-17 .top-bar {
  height: 50px;
}
```
Regards,
Eva Kemp.
#132197 Copied
smartrobbie

Participant

July 2, 2016 at 10:51

Thanks I added that, it leave a white area below and doesnt shift up the grey line. do you know how I can fix that?

#132228 Copied
Eva Kemp

Support staff

July 4, 2016 at 07:19
Hello,

Also try to use this code:
```
.header-type-17 .top-bar .container > div {
  height: 45px;
}
```
Regards,
Eva Kemp.
#132294 Copied
Viewing 6 results - 1 through 6 (of 6 total)