GeneratePress Header: CSS and Code Snippets

---

GeneratePress:

This is the CSS you need if you want to add a border at the bottom of the header

.site-header {
border-bottom: 1px solid #535967;
}

You can change #535967 to whatever color you want

---

Add Padding to the Header on Mobile Devices

@media only screen and (max-width: 768px) {
  .site-header {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

---

GeneratePress: Having Different Colors in the Site Title

When it comes to creating a captivating online presence, the design elements of your website play a crucial role. One such element is the site title, which serves as a prominent identifier for your brand.

While traditionally presented as plain text, it’s not uncommon for website owners to wonder if they can infuse their site title with more visual appeal, such as using different colors for each word.

This post aims to address this query and explore the possibilities of incorporating varying colors into your site title, even in the absence of a logo image.

Code Snippet

This is the code snippet that you need to add to your functions.php file or implement using your favorite code snippets plugin

add_filter('generate_site_title_output',function($output){
    $first_word = '<span class="st-first-word">WP</span>';
    $second_word = '<span class="st-second-word">Surfer</span>';
    $new_site_title = $first_word.$second_word;
    $output = sprintf(
				'<%1$s class="main-title"%4$s>
					<a href="%2$s" rel="home">
                        %3$s
					</a>
				</%1$s>',
				( is_front_page() && is_home() ) ? 'h1' : 'p',
				esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ),
				$new_site_title,
				'microdata' === generate_get_schema_type() ? ' itemprop="headline"' : ''
			);

    return $output;
});

The Styles

For the color of the first word you should apply them in the Customizer > Colors > Header > Site Title

For the second part of the site title, you should apply this CSS using the GeneratePress elements section or any other method to add styles.

.main-title a .st-second-word {
    color: #94c221;
}

The code snippets provided in this post were originally posted on GeneratePress Support Forum

---