Coffee Pro Theme- Button styling

Home Forums All Other Themes Coffee Pro Theme- Button styling

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #158293
    Ruheene Jaura
    Participant
    • Topics: 11
    • Replies: 21
    • Total: 32
    Member since: March 24, 2020

    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:

    Select input styling

    Thanks so much,
    Ruheene

    #158357
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25796
    • Total: 25796
    Member since: August 16, 2013

    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

    #158374
    Ruheene Jaura
    Participant
    • Topics: 11
    • Replies: 21
    • Total: 32
    Member since: March 24, 2020

    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:

    View post on imgur.com

    Thanks!

    #158557
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25796
    • Total: 25796
    Member since: August 16, 2013

    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

    #158571
    Ruheene Jaura
    Participant
    • Topics: 11
    • Replies: 21
    • Total: 32
    Member since: March 24, 2020

    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?

    #158592
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25796
    • Total: 25796
    Member since: August 16, 2013

    Hi,

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

    Regards,
    Dave

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.