Customizing Site Header of Genesis Child Theme


The most important part of an website is its header. It may contain site title, site description, website logo, header image, search box, advertisement or any other widget.

The first impression comes from your viewer is the site header. This is the most visible part of your website. So, in our opinion site header should only consist of your site name. So that your viewers may recognize at anytime only seeing the site name. You are trying to memorize your audience only your site name which is easy for them. You may further remove site description if you have an about page somewhere in your home page. So, only site title in the site header looks elegant and have a deep impact upon your readers.

1. Remove Site Description

To remove site description in any genesis child theme, you should only add the following line of code at the end of your theme’s functions.php file.

remove_action( 'genesis_site_description', 'genesis_seo_site_description' );

2. Choose appropriate font size, padding and margin values

Edit theme’s style.css and change padding and margin values as shown below:

/* Site Header */

.site-header {
	...
	padding-bottom: 20px;
	...
}
.site-title {
	font-size: 30px;
	...
	margin-bottom: 10px;
	margin-top: 30px;
}
.header-image .site-title {
	margin: 20px 0 0;
}

Play with the above numbers in red to achieve best looking header.
Dont forget to refresh your browser cache each time you update your theme style.css file.


Leave a Reply

Your email address will not be published. Required fields are marked *