How to Change Color mobile menu - by yohantosadu

This topic has 6 replies, 2 voices, and was last updated 6 years ago ago by Rose Tyler

  • Avatar: yohantosadu
    yohantosadu
    Participant
    February 8, 2018 at 10:53

    How to Change Color mobile menu from black to white
    http://prntscr.com/ibsc86

    and how to make product in front page mobile from 1 coloum to 3 coloum with zero margin
    http://prntscr.com/ibsd63

    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 8, 2018 at 12:00

    Hello,

    1. Please add this code in Theme Options > Custom css or in style.css file of child theme:
    .mobile-nav-heading, .et-mobile-menu li a, .mobile-nav .links li a{color: #fff;}
    2. Please add this code in Theme Options > Custom css > Custom css for mobile:

    .home .products-grid .product {
        width: 33.33% !important;
    }
    .home .row-count-3 .product:nth-child(2n+1), .home .row-count-4 .product:nth-child(2n+1){
        clear: none !important;
    }

    Regards

    Avatar: yohantosadu
    yohantosadu
    Participant
    February 8, 2018 at 15:51

    okay, it works.
    how to resize font,to make it smaller
    http://prntscr.com/ibwu3c

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 8, 2018 at 15:58

    Looks like it would be better to set products in 2 columns, please change this code:

    .home .products-grid .product {
        width: 33.33% !important;
    }
    .home .row-count-3 .product:nth-child(2n+1), .home .row-count-4 .product:nth-child(2n+1){
        clear: none !important;
    }

    to this one:

    .home .products-grid .product {
        width: 50% !important;
    }

    Regards

    Avatar: yohantosadu
    yohantosadu
    Participant
    February 8, 2018 at 16:31

    thank you for ur suggestion,
    I will try first with 3 columns,
    how to apply to the shop page too …?

    align add to cart and selection option
    I already use css below

    .products-grid .product-title, .productCarousel .product-title{
    min-height: 60px;
    margin-top: 10px;
    }

    but,
    there are some products that can not be straight
    http://prntscr.com/ibxg0m and http://prntscr.com/ibxggd

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 9, 2018 at 11:47

    Hello,

    Please delete this code:

    .products-grid .product-title, .productCarousel .product-title{
       min-height: 60px;
      margin-top: 10px;
    }

    and change this http://prntscr.com/icamut
    to:

    .products-grid .product {
        width: 33.33% !important;
    }
    .row-count-3 .product:nth-child(2n+1), .home .row-count-4 .product:nth-child(2n+1){
        clear: none !important;
    }

    + add this code:

    .products-loop.products-grid {
        display:  -webkit-box;
        display:  -webkit-flex;
        display:  -ms-flexbox;
        display:  flex;
        -webkit-flex-wrap:  wrap;
            -ms-flex-wrap:  wrap;
                flex-wrap:  wrap;
        float:left;
    }
    .products-loop.products-grid .product {
        position:  relative;
        padding-bottom: 35px;
    }
    .products-loop.products-grid .add_to_cart_button {
        position:  absolute;
        left:  3px;
        bottom:  0;
    }
    .products-loop.products-grid .product .price,
    .products-loop.products-grid .product  del {
        font-size: 14px !important;
    }
    .products-loop.products-grid .product .add_to_cart_button {
        padding: 5px;
    }

    Regards

  • Viewing 6 results - 1 through 6 (of 6 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.