CSS Lesson #27: Arranging your Logo, Title and Close Button on Mobile

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia, Brazil & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

The header of the Cookie Banner can contain 3 elements:

  • A logo
  • A banner title
  • A close button 

As you can see in the image, the banner title is gone when you view the cookie banner on mobile. This is to make room for the other elements, by clearing the largest element; the text.

This also happens when you do not have a close button, and/or logo enabled. We will explain below how to rearrange the elements to get what you want.

Three options

  1. We will explain how to get the title back and move it to the left, with a close button. The logo will not remain.
  2. No close button, but a logo and title.
  3. Centering the title only. The logo and close button will be hidden.

1. Title and Close Button

 

Example

CSS

2. Title and Logo

Example

CSS

3. Title only

Example

CSS

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress

Categories

Popular articles

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!