Sidemenu button color on mobile

Hi sorry to bother you guys but I have tried everything I can find for css to change the original black color of the sidemenu button and background color in the slider on mobile. On desktop it is changed to the blue but not on mobile. When I click the menu on mobile however the background is the color I want with the css I used to edit the .slick_nav just not the button before the menu is open. Please help. Website is http://epicpartiesbyrevo.ca

Thanks. Jon

Hi,

You can change the secondary navbar color on the mobile too with this Custom CSS:

@media only screen and (max-width: 1024px) {
.s-mobile-nav {
    background: #0090a3 !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Best Regards,
Csaba

Amazing THANK YOU! I have been changing my border colors as well and have been successful with the woocommerce product listing borders and the widget box borders but the grey ones around the promo boxes and the page title box result/sorting borders. A solution to this would be great! OH and the promo icons and text can i change those?

Just another bump in the road here! if possible also when you reply to my last post maybe you could please help me also change those border pieces thickness and disable the slider side menu ONLY on mobile for this theme as well; That or the top menu on the top. I get two menus on mobile, one below the logo and then one again on the top of the slider.

Here are some pictures of exactly what i mean


Hi,

You can apply the requested changes with this Custom CSS:

.promo-box {
    border-color: lavender !important;
    border-width: 8px !important;
}

.header-promo {
    border-color: lavender !important;
    border-width: 8px !important;
}

.woocommerce .woocommerce-breadcrumb {
    border-color: lavender !important;
    border-width: 8px !important;
    border-radius: 20px !important;
}

@media only screen and (max-width: 767px) {
.s-mobile-nav {
    display: none !important;
}
}

Please let me know how it works.

Best Regards,
Csaba