By Stephen Walker

Over on the Avada Website Showcase group, Tom Dent posted a site that had a very nice privacy bar implementation. It turns out it is just CSS applied to the Avada privacy bar and the basic settings in Avada options for positioning, colors, and content. Tom was kind enough to share the code, so I implemented it here and am passing it on.

The SASS (scss) version

You can use this with a plugin like Script Organizer that compile the code on the fly.

Copy to Clipboard

This is the compiled CSS

You can add this to your custom CSS.

Copy to Clipboard

Adding animation

I had a request make this slide in from the left or right and this is really easy to do with modern CSS. Simply add a keyframe entry and then call it in the .fusion-privacy-bar class:

.fusion-privacy-bar{
	animation: .6s ease-out 0s 1 slideInFromLeft;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

Originally published on July 9, 2021

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • CSS Variables in Avada

    The ability to use CSS variables directly in Avada settings can change your approach to design.

  • A Customized Read More Link

    Another in the series of micro-interactions. This time a read more link with what appears to be a shrinking underline.

  • System Font Weights