[Resolved] Custom menu color not function on mobile view

Please view this page http://demo.852ebiz.com/s/settway/ on mobile

Dear Ying,

Below is my stylesheet in my child-theme but I found it was not affected by the child-theme styles, just the font-weight for menu-item was too low, and made the menu font not clear enough. Here is my finding. ( https://prnt.sc/16ngys0 )

h1, h2, h3, h4, h5, h6 {
    color: #364E40;
}

.gb-button,
input[type="submit"],
input[type="email"],
.wp-block-button__link,
.add_to_cart_button,
.ajax_add_to_cart,
.wp-block-button.wc-block-grid__product-add-to-cart a, .wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
    border: 0px solid #000000;
}

.inside-navigation.grid-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.woocommerce .col-1, .col-2 {
    max-width:none; 
}

.woocommerce form .form-row label, .woocommerce-page form .form-row label {
    width: 100%; 
}

.woocommerce table.shop_attributes td {
    padding-left: 5px;
}

.inside-navigation.grid-container {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 35px;
    padding-right: 35px;
    background-color: #9FB6CA;
}

.menu-item:hover {
    background-color: none;
}

/* Fix Sticky Navigation Logo */
.header-image.is-logo-image {
    height: 80px;
    width: auto;
}