Icons in mobile - by stnangel - on WordPress WooCommerce support

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

  • Avatar: stnangel
    stnangel
    Participant
    August 16, 2016 at 17:53

    private

    Please, contact administrator
    for this information.
    9 Answers
    Avatar: Jack Richardson
    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.

    Avatar: stnangel
    stnangel
    Participant
    August 17, 2016 at 22:08

    private

    Please, contact administrator
    for this information.
    Avatar: Rose Tyler
    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.

    Avatar: stnangel
    stnangel
    Participant
    August 18, 2016 at 18:39

    Please review

    Please, contact administrator
    for this information.
    Avatar: Jack Richardson
    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.

    Avatar: stnangel
    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.

    Avatar: Robert Hall
    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

    Avatar: stnangel
    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

    Avatar: Jack Richardson
    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.

  • Viewing 10 results - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.