Snippets for GeneratePress

CSS Snippets


[CSS] Add animated lines on top of main menu items

/* Main menu Animated line on hover */

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 0;
    height: 2px;
    background-color: #fcb900;
    transition: 0.3s width ease;
}

.main-navigation .menu > .menu-item > a:hover::after {
    width: 50px;
}

[CSS] Add Animated lines under your links in the content area

This was borrowed from the website of Mike Oliver who, by the way, create some of the most beautiful sites using GeneratePress. You might need to tweak the customizer color settings for the links in order to make it look the way you want.

p:not(.main-title) a:not(.button) {
    box-shadow: 0 -3px 0 #ffdd7f inset;
    transition: all 0.6s ease 0s;
}

p:not(.main-title) a:not(.button):hover {
    box-shadow: 0 -8px 0 #fcb900 inset;
}

[CSS] Add letter spacing or Kerning to your main menu

/* Kerning the main menu */
.main-navigation .menu > .menu-item > a{
	letter-spacing:1px;
}

[CSS] Align footer / copyright text to the left on desktop 🙂

/* text-align:left the Footer Copy Text just in desktop*/
@media(min-width:769px){
	.footer-copy-text{
		text-align:left;
		line-height:1;
	}
}

JavaScript Snippets


[JS] Open all external links in _blank

To use this snippet you need to use the Elements Add-on. Just create a custom Hook in the wp_footer location and give it the “Display Rule” for the “Entire Site”.

<!-- Open all links in _blank -->
<script>
  function externalLinks() {
    for(
      var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
      var b = c[a];
      b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank")
    }
  };	
externalLinks();
</script>