How to add a “Refuse cookies” button in the banner bar

Hi @antcrescendo,

Complianz will automatically configure a ‘Deny’/functional only button in regions where this is legally required. If you have configured Complianz for the US, this wont’ be added by default. If you select for example the EU, the deny button will be added automatically.

Also Complianz offers multiple shortcodes to manage consent in other areas of the site, please refer to: https://complianz.io/used-shortcodes-by-complianz/

Regarding the size of the cookie banner, please navigate to Complianz -> cookie banner. There you could try on of there two options:

1. Appearance -> position, select ‘bottom’. It stretches the banner to be full with, but on the bottom of the screen

2. Appearance -> position, select ‘center’ + enable ‘show as soft cookie wall. This will add an overlay to the page, forcing the visitor to interact with the cookie banner before continuing to browse the website.

Please let us know if you have any further questions, we’re happy to help!

Regards,
Leon

Hi, @leonwimmenhoeve, thanks for responding to my inquiries. Although the deny button is not mandatory for Canadians, is it possible to add it as an option? Additionally, how can I increase the size of the cookie banner header?

Please see an example: https://postimg.cc/HjJzwNwB

Moreover, the cookie banner title does not appear on mobile devices. Here is an example: https://postimg.cc/7bCGt8QJ

How can I make the title appear?

Thanks,

Hi @antcrescendo

Yes, you can change the banner to “opt-in” (to include the deny button/categories) in Canada under Wizard > General > Security & Consent > Does your website contain or process sensitive (personal) information? by answering this question with “Yes”.

Changing banner width can be done under Complianz > Cookie Banner > Appearance > Width of the banner in pixels, but note that the header size will also increase based on the amount of text it contains.

To re-enable the title on mobile, you can add some CSS under Appearance > Customize > Additional CSS:

@media (max-width: 425px) { 
    .cmplz-cookiebanner .cmplz-header .cmplz-title {
        display: flex;
        grid-column: 1 / 4; 
    }
    

    .cmplz-cookiebanner .cmplz-header .cmplz-close {
        position: absolute;
    }
}

Kind regards, Jarno

Hello Jarno, Thank you for your help. Unfortunately, when I implement the code you provided into my theme CSS, nothing happens when I preview my website in my browser. I tested it in an incognito window as well.

Code added to my theme: https://postimg.cc/sQ4bnkRQ

Mobile View: https://postimg.cc/njdryw4r

Let me know what you think.

Thanks,

• This reply was modified 1 year, 7 months ago by antcrescendo.

Hi @antcrescendo,

Hmm, it works when I paste it in the browser, but it might not be ‘specific’ enough so it’s still being overridden. Could you replace it with the below instead?

@media (max-width: 425px) { 
    .cmplz-cookiebanner .cmplz-header .cmplz-title {
        display: flex!important;
        grid-column: 1 / 4!important; 
    }
    

    .cmplz-cookiebanner .cmplz-header .cmplz-close {
        position: absolute;
    }
}

Kind regards, Jarno

Hey @jarnovos,

Unfortunately, it still doesn’t show. Feel free to test it out on my website and let me know if you see it. https://Crescendo.com

New code in theme: https://postimg.cc/G8jSPVWM

Is it possible that there is other conflicting code causing this issue? If so, would adding the code at the end of the Additional CSS section resolve the problem?

I have also attached a screenshot of how it appears when I resize my browser to simulate a mobile view. https://postimg.cc/LYss2K3f

Mobile View: https://postimg.cc/LYss2K3f

Thanks ??

@jarnovos, It works! thanks for your help!