Coffee Pro Theme- Button styling

[Ruheene Jaura]

Hi there,

Could you help me fix the styling for the select inputs for all products on the site below please? I want the desktop styling to match the mobile styling (font, padding, background), but can’t find the mobile screen styling for it (this uses your Coffee Pro theme):

https://houseofbagelscolma.com/product/breakfast-bagels/

Screenshots of mobile + desktop:
https://imgur.com/a/FBKgsaG

Thanks so much,
Ruheene

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:479px) {
.woocommerce div.product form.cart .variations select {
    background: transparent;
    border: 1px solid #f1f1f1;
}
}

Regards,
Dave

[Ruheene Jaura]

Thanks, although I was actually asking for help with styling the desktop version, not the mobile version 🙂 Anyway, I managed to figure it out and styled a few things- but the one thing I can’t seem to figure out is how to style the hamburger menu on a mobile screen. I changed the color of the ‘Menu’ text in the menu bar to #54433A, but the 3-line menu is still that light greyish color? How do I change that to match the ‘Menu’ text?

Screenshot:
https://imgur.com/kCFCWi8

Thanks!

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:767px) {
.toggleMenu { position:relative;}
.toggleMenu::after {
    position: absolute;
    top: 50%;
    right: 15px;
    content: "\f0c9";
    font-family: fontAwesome;
    font-size: 21px;
    transform: translateY(-50%);
	color:#54433A;
}
.toggle a { background:none !important;}
}

Regards,
Dave

[Ruheene Jaura]

Thanks. One more thing- I’d like the homepage images slider to link to the ‘Order Online’ page where all the products are. Is there a way to do that?

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Homepage Slider >> Slide URL >> Add Order Online page URL there.

Regards,
Dave

[Author]

Posts