GeneratePress Navigation Effect – Triangle indicator

.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: "";
}

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;
}
Kategorien css

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;
}
Kategorien css

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

Kategorien css

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%;
    }
}