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
I had a problem that the privacy bar isn’t really responsive. With this code it works like charm. Thank you!
I am glad it was helpful.