How can I style the cookie alert banner? I want it to be shown at the bottom of the window.

Occasional Contributor

The cookie banner styling is located in the div id="hs-eu-cookie-confirmation" and div class="can-use-gradients". Unfortunately it's located in a system stylesheet, which is uneditable.


I tried adding these IDs/classes to my own stylesheet, but can't seem to get it to override the system stylesheet.


Has anyone had success with this?

5 Replies 5
HubSpot Product Team

Hey @HappyTaty do you have any resources you can share with @jmpimental, I know you've seen this query come up a lot 🙂

Occasional Contributor

@roisinkirby Thank you! It would be great to have some more info/help on this 🙂

New Contributor | Gold Partner

Hi  @jmpimental,

We use Hubspot in combination with a Wordpress site. But basicly we overide the css styling that comes out of the box with a !important styling. Not the prettiest to use but it is effective.


                   top: auto !important;






Hope that helps

Occasional Contributor



thanks for posting. 


HS actually changed the css classes to apply the changes.


However, and here comes the time-saver,  these only work if you don't have entered any custom stylings in the HS settings in the admin sections. Otherwise, HS will create a custom CSS stylesheet and will not allow you to overwrite the stylings in the code.


/* =============== EU Cookie Confirmation Bar =============== */

/* Confirmation Outer Wrapper*/
#hs-eu-cookie-confirmation {}

/* Confirmation Inner Wrapper*/
#hs-eu-cookie-confirmation-inner {}
#hs-eu-cookie-confirmation-inner p{}

/* Confirmation Button */
#hs-en-cookie-confirmation-buttons-area {}
a#hs-eu-confirmation-button {}
HubSpot Moderator



A colleague of mine actually put together an article on how to customize this banner. 


You can find the original article below.




Let me know if this article helps or if it should be updated.