Return to previous page

Icons in mobile - by stnangel - on WordPress WooCommerce support

This topic has 10 replies, 4 voices, and was last updated 7 years, 8 months ago ago by Jack Richardson

stnangel

Participant

August 16, 2016 at 17:53

private

Please, contact administrator
for this information.

#136858 Copied Theme version: new WooCommerce version: new

9 Answers
Jack Richardson

Support staff

August 16, 2016 at 19:27
Hello,

Try to use this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.navbar-header.navbar-right {
   width: 33%!important;
}
```
Best regards,
Jack Richardson.
#136867 Copied
stnangel

Participant

August 17, 2016 at 22:08

private

Please, contact administrator
for this information.

#137023 Copied Theme version: new WooCommerce version: new
Rose Tyler

Support staff

August 18, 2016 at 07:27
Hello,

You can add this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.header-type-18 .navbar-right .navbar-right .shopping-cart-widget {
  padding-left: 0;
}
.header-search {
  margin-top: 5px !important;
  margin-right: 5px;
}
```
Regards,
Rose Tyler.
#137038 Copied
stnangel

Participant

August 18, 2016 at 18:39

Please review

Please, contact administrator
for this information.

#137112 Copied

Jack Richardson

Support staff

August 18, 2016 at 21:48

Hello,

As I see search icon is shown properly now:
http://storage8.static.itmages.com/i/16/0818/h_1471553308_6395051_a9dd4f54a3.png

Try to clear browser cache and check again.

Best regards,
Jack Richardson.

#137120 Copied

stnangel

Participant

August 18, 2016 at 22:45

Hi,

This seems to look ok in firefox when you shrink the browser window however when I check the website on my iphone, the icons still look wrong.

#137126 Copied
Robert Hall

Support staff

August 19, 2016 at 07:35
Hello,

I’ve added the following code in Custom CSS for mobile. Please check.
```
.header-type-18 .navbar-right .navbar-right .shopping-cart-widget {
  padding-left: 0;
padding-right:0px;
}
.header-search {
  margin-top: 5px !important;
  margin-right: -8px;
}
```
Regards,
Robert Hall
#137136 Copied
stnangel

Participant

August 19, 2016 at 16:29

Great. Only thing now is when you scroll down you will notice when the top navigation comes back, the icons look off again. If we can match that to what you did before the scrolling down the page then we are done!

I appreciate your help, I am very impressed.

Thanks

#137196 Copied
Jack Richardson

Support staff

August 19, 2016 at 18:38
Hello,

Please use this code in Custom CSS for mobile:
```
.fixed-header-area .header-search {
    margin-top: 14px !important;
}
```
Best regards,
Jack Richardson.
#137211 Copied
Tagged: icons, mobile, persuasive, templates, woocommerce, wordpress
Viewing 10 results - 1 through 10 (of 10 total)