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.

.fusion-privacy-bar{
    margin: 20px!important; 
    max-width: 500px!important;
    width:unset;
	box-shadow: 0 4px 8px rgba(0,0,0,0.4);
	padding: 25px!important;
	border-radius: 10px;
	/* Privacy Bar Main */
	.fusion-privacy-bar-main{display: block!important; margin: 0!important;
		span{margin: 0!important;
			p{margin-top: 0!important; line-height: 20px!important}
			a{text-decoration: underline; display: inline-block; outline: none!important;
				&:hover{text-decoration: none;}
			}
		}
		.fusion-button{
        display: block!important; 
        margin: 20px 0 0!important; 
        border: none!important;
        max-width: none!important;
			&:hover{opacity: 0.8;}
		}
	}
	
	/* Privacy Bar Full */
	.fusion-privacy-bar-full{
        padding-top: 0!important; 
		.fusion-column{width: 100%!important; margin: 0!important;
			h4{margin: 20px 0 5px!important;}
			.fusion-privacy-choices{
				li{display: inline-block;
					label{margin: 0 10px 0 0;
						input{margin: 0;}
					}
				}
			}
			a{text-decoration: underline;
				&:hover{text-decoration: none;}
			}
		}
	}
	
}

This is the compiled CSS

You can add this to your custom CSS.

.fusion-privacy-bar {
  margin: 20px !important;
  max-width: 500px !important;
 width:unset;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  padding: 25px !important;
  border-radius: 10px;
  /* Privacy Bar Main */
  /* Privacy Bar Full */
}

.fusion-privacy-bar .fusion-privacy-bar-main {
  display: block !important;
  margin: 0 !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main span {
  margin: 0 !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main span p {
  margin-top: 0 !important;
  line-height: 20px !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main span a {
  text-decoration: underline;
  display: inline-block;
  outline: none !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main span a:hover {
  text-decoration: none;
}

.fusion-privacy-bar .fusion-privacy-bar-main .fusion-button {
  display: block !important;
  margin: 20px 0 0 !important;
  border: none !important;
  max-width: none !important;
}

.fusion-privacy-bar .fusion-privacy-bar-main .fusion-button:hover {
  opacity: 0.8;
}

.fusion-privacy-bar .fusion-privacy-bar-full {
  padding-top: 0 !important;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column {
  width: 100% !important;
  margin: 0 !important;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column h4 {
  margin: 20px 0 5px !important;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column .fusion-privacy-choices li {
  display: inline-block;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column .fusion-privacy-choices CSS Version label {
  margin: 0 10px 0 0;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column .fusion-privacy-choices li label input {
  margin: 0;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column a {
  text-decoration: underline;
}

.fusion-privacy-bar .fusion-privacy-bar-full .fusion-column a:hover {
  text-decoration: none;
}
/*# sourceMappingURL=privacy.css.map */

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

white usb cable plugged in white electric socketThe Events Calendar is Retiring Legacy Views
white wooden table near brown chairAvada's Fusion White Label Branding

2 Comments

  1. Bernd January 12, 2023 at 8:08 am - Reply

    I had a problem that the privacy bar isn’t really responsive. With this code it works like charm. Thank you!

    • Stephen Walker January 12, 2023 at 10:53 am - Reply

      I am glad it was helpful.

Leave a Reply

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

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022