.main-navigation .main-nav ul li[class*="current-menu-"] > a:after{
position: absolute;
bottom: calc(50% - 1.5em);
height: 0;
width: 0;
left: -webkit-calc(50% - 8px);
left: calc(50% - 10px);
border: 9px solid rgba(0,0,0,0);
border-bottom-color: currentcolor;
content: "";
}css
GenerateBlocks – Headline Divider
/* GB HEADLINE DIVIDER */
.mw-heading-divider {
position: relative;
}
.mw-heading-divider-left:before, .mw-heading-divider-center:before {
content: "";
position: absolute;
top: -.8em;
left: 0;
height: 2px;
width: 100px;
background: #454545;
}
.mw-heading-divider-center:before {
left: 50%;
transform: translatex(-50%);
}Link column / container with css
.clickable {
position: relative;
}
.clickable a:after {
content: "";
display: block !IMPORTANT;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}Height 100vh for iOS
CSS
.my-element {
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}JS
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);JS Eventlistener for rezising
// We listen to the resize event
window.addEventListener('resize', () => {
// We execute the same script as before
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});CSS change List Bullet
ul.mw-list-skew-bullets {
list-style: none;
margin-left: 1em;
line-height: 2em;
}
ul.mw-list-skew-bullets li::before {
content: "";
color: #034c93;
font-weight: bold;
display: inline-block;
width: .8em;
height: .8em;
background: #034c93;
margin-left: -1em;
margin-right: 10px;
transform: skew(-15deg);
}ul.mw-list-strich, ul.mw-list-strich li>ul {
list-style: none;
margin-left: 1em;
}
ul.mw-list-strich li::before {
content: "-";
font-weight: bold;
display: inline-block;
width: .8em;
margin-left: -1em;
}
ul.mw-list-strich li>ul li:before {
content: "-";
font-weight: bold;
display: inline-block;
width: .8em;
margin-left: -1em;
}GeneratePress body backgound image with overlay
body {
background:
/* Update the RGBA value with your own */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
url(URL TO YOUR IMAGE);
}Display none – not if Elementor is active
Set element class to:
eledpn
body:not(.elementor-editor-active) .eledpn {
display: none;
}Elementor – Style Placeholder in Elementor Form Widget
input::placeholder, textarea::placeholder {
color: #0c0c0c!important;
opacity: 1!important;
}Gradient Heading
h2.gradient-heading {
display: inline-block;
color: transparent;
background: -webkit-gradient(linear, left top, right top, from(#f7797d), color-stop(#FBD786), to(#C6FFDD));
background: -o-linear-gradient(left, #f7797d, #FBD786, #C6FFDD);
background: linear-gradient(to right, #f7797d, #FBD786, #C6FFDD);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}Gradient Heading Example
GeneratePress: Menu Underline Effects
@media (min-width: 769px) {
.main-navigation .menu > .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}
}