We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this effect.
You can easily replicate the 'exclusion' blend mode commonly seen in design programs such as Adobe Photoshop or Illustrator right into your navbar in Semplice.
You can view a live page example of this effect here.
To add this effect into your navbar, simply copy the following line of CSS code and paste it into Customize > Advanced > Custom CSS > Global CSS:
.semplice-navbar {mix-blend-mode: exclusion !important;}
If you plan on using a transparent background with a darker logo and menu items, you may need to invert the effect. You can in this case use the following:
.semplice-navbar {mix-blend-mode: exclusion !important; filter: invert(1) !important;}
Exclusion effect in four corner navigation
In order to add the exclusion effect to the “Logo in the middle, menu on four corners” navigation preset you can use the following code. Add the next code snippet to "Customize" > "Advanced" > "Edit Custom CSS":
.semplice-navbar {
mix-blend-mode: exclusion !important;
filter: invert(1) !important;
height: 100% !important;
pointer-events: none !important;
}
.semplice-navbar nav,
.semplice-navbar .logo,
.semplice-navbar .hamburger {
pointer-events: auto !important;
}