GeneratePress Custom CSS

Mike Oliver logo mark

A growing compilation of CSS to help you style and customize GeneratePress

Header & Navigation Styling

/* main menu letter spacing */

.main-navigation a {
  letter-spacing: 1px;
}
/* center aligned text on the mobile menu */

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .mobile-bar-items a {
  text-align: center;
}
/* add a button to your menu - you will need to add a Custom Link to your menu and in the CSS Class field write nav-button */

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a{
  color: rgba(36,36,36,1.0);
  border: 2px;
  border-style: solid;
  line-height: 40px; /* button height */
  margin-top: 3px; /* adjust to horizontally align with other menu items */
  border-radius:30px;
  margin-left: 20px; /* space to the left of button */
  transition: all 0.6s ease 0s;
} 

.main-navigation:not(.slideout-navigation) .main-nav li.nav-button a:hover{
  color: rgba(36,36,36,0.8);
  transition: all 0.6s ease 0s;
}
/* add rules above and below the navigation */

#site-navigation {
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
}
/* spacing around mobile logo */

.mobile-header-navigation .mobile-header-logo img {
  padding: 20px 0px 0px 10px;
}
/* dropdown menu font size */

.main-navigation .main-nav ul ul li a {
  font-size: 14px;
}
/* hide the topbar on mobile devices */

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
}
/* add rules above or below your menu on hover */

.main-navigation .menu > .menu-item > a::after {
  content: “”;
  position: absolute;
  right: 50;
  left: 50%;
  top: 0px; /* controls where the line appears on hover */
  color: #363636;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: block;
  width: 0;
  height: 2px; /* controls thickness of the line */
  background-color: currentColor;
  transition: 0.3s width ease;
}

.main-navigation .menu >a::after,
.main-navigation .menu > .menu-item > a:hover::after {
  width: 40%; /* controls the width of the line */
  color: #363636;
}
/* control the size and position of the mobile menu icon */

button.menu-toggle {
  font-size: 26px;
  padding-right: 30px;
}

Body Styling

/* button styling - you can also set the button colors in the customizer button settings */

.button,
.button:visited, 
.button:focus{
  background-color: rgba(36,36,36,1.0);
  padding: 10px 24px 10px 24px;
  border-radius: 4px;
  transition: all 0.6s ease 0s;
}

.button:hover,
.button:active {
  background-color: rgba(36,36,36,0.8); 
  transition: all 0.6s ease 0s;
}
/* style your block quotes */

blockquote {
  max-width: 600px;
  text-align: left;
  margin: 30px;
  padding: 20px;
  font-size: 20px;
  color: #363636;
}
/* add an opaque gradient overlay on top of your background photo in your header element - in the Header Element, Element Classes field write gradient-overlay */

.gradient-overlay {
  position: relative;
}

.gradient-overlay:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(32,21,95,0.8) 10%, rgba(59,197,240,0.6) 100%);
}

.gradient-overlay .inside-page-hero {
  z-index: 1;
  position: relative;
}
/* space after a paragraph before the next header tag - each tag needs it's own rule */

p + h3 {
  margin-top: 40px;
}
/* blog post meta styling with no underline */

.post-meta {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.post-meta a {
  border-bottom: none;
}
/* add a white border around the entire site on tablet and desktop */

@media (min-width: 769px) {
  body {
    border: 20px solid #ffffff;
  }
}
/* automatically add a drop cap to the first letter of the first paragraph of a post */

.single-post .entry-content > p:first-of-type:first-letter {
  float: left;
  clear: both;
  font-size: 3em; /* adjust size of drop cap */
  font-weight: 600;
  line-height: 0.8em;
  margin: 0.1em 0.1em 0em 0px;
  padding: 2px 0px; /* adjust spacing around drop cap */
  color: #363636;
}
/* hide content on mobile devices */

<div class=”hide-on-mobile”>
/* your content */
</div>
/* controls the color of highlighted website content */

::selection {
  background: #00a2ff; 
  color: #ffffff; 
}

::-moz-selection {
  background: #00a2ff; 
  color: #ffffff; 
}

Footer & Sidebar Styling

/* control the width of the footer widgets for different devices based on 3 columns */

@media (min-width:1025px) {
  .footer-widgets .footer-widget-1 {
    width: 50%;
  }
  .footer-widgets .footer-widget-2 {
    width: 25%;
  }
  .footer-widgets .footer-widget-3 {
    width: 25%;
  }
}

@media (min-width:769px) AND (max-width:1024px) {
  .footer-widgets .footer-widget-1,
  .footer-widgets .footer-widget-2,
  .footer-widgets .footer-widget-3 {
    clear: none !important;
    float: left;
    width: 33.3333%;
  }
}

@media (max-width:768px) {
  .footer-widgets .widget {
    float: none;
    margin: 0 auto;
    max-width: 400px;
    padding: 60px 20px 0 20px;
  }
}
/* center the footer widget content */

.inside-footer-widgets {
  text-align: center;
}
/* align footer widgets left, center, right on desktop and tablet and all centered for mobile */

@media (min-width:769px) {
  .footer-widgets .footer-widget-1 {
    text-align: left;
  }
  .footer-widgets .footer-widget-2 {
    text-align: center;
  }
  .footer-widgets .footer-widget-3 {
    text-align: right;
  }
}

@media (max-width:768px) {
  .footer-widgets .widget {
    text-align: center;
  }
}
/* add bottom rules to widget titles */

.widget-title {
  border-bottom: 1px solid #363636;
  line-height: 2em;
  display: inline-block;
}
/* set letter spacing on widget titles */

.widget-title {
  letter-spacing: 2px;
}