Is it possible to adjust the CSS of the OneTrust CookiePro banner in Webflow to move the cookie icon to the right side of the display?

Published on
September 22, 2023

Yes, it is possible to adjust the CSS of the OneTrust CookiePro banner in Webflow to move the cookie icon to the right side of the display. To do this, you will need to make use of Webflow's built-in Custom Code feature. Here are the steps you need to follow:

  1. Add the OneTrust CookiePro banner to your Webflow project by following the OneTrust installation instructions.

  2. Once the banner is added, go to your project settings in Webflow and click on the Custom Code tab.

  3. In the "Head Code" section, paste the following CSS code:

<style>.ot-sdk-bar:not(.ot-cornerbutton):not(.ot-indicator) .ot-sdk-bar-right {   justify-content: flex-end !important;}</style>
  1. Save the changes and publish your site.

By adding this CSS code, you are targeting the right side of the OneTrust CookiePro banner and adjusting its layout to align the cookie icon to the right.

Using this method, you will be able to customize the placement of the cookie icon within the OneTrust CookiePro banner in Webflow. Remember to test your changes on different devices and browsers to ensure the layout remains consistent.

Additional Questions:

  1. How do I add the OneTrust CookiePro banner to my Webflow project?
  2. Can I customize the appearance of the OneTrust CookiePro banner in Webflow?
  3. Is it possible to integrate additional functionalities into the OneTrust CookiePro banner in Webflow?