How to Make Genesis Entry Header Full Width

The default location of Genesis Entry Header, which includes Page Title and Post Meta, is inside the Site Inner which has a specified width in the Genesis Sample Theme.

However, if you want to make your Genesis Entry Header full-width, you will have to move it outside the Site Inner.

In this post, I will share code to show you how to reposition the Genesis Entry Header below Site Header, making it full-width with a background color to help it stand out from the content.

Let’s assume you want a full-width Entry Header both in pages as well as posts. If you want to do it otherwise, you will need to use conditionals, which I will discuss is another post.

So, here’s the code to remove entry header from its usual location in Genesis Sample theme and display it below Site Header.

You need to past the above code at the bottom of your functions.php file.

Add CSS

You need to add some CSS to add padding around the entry header and add some background color to help your entry header stand out.

Here’s the code I have used for this tutorial, but you can add your own css depending on your liking.

.entry-header {
background-color: #ccc;
text-align: center;
padding: 90px 0 90px 0;
}

.entry-title {
font-size: 36px;
font-size: 3.6rem;
}

That’s it. You need to save your work, refresh your browser and give yourself a pat on the back.

Do you want to see how it appears on my page and post?

Page Title Moved Below Site Header

Post Title and Post Info Moved Below Site Header

Let me know if you have any questions.

Tutorial Updated

Tom asked, “Thanks a lot, this works but only for posts and pages. In archives it moves the title of the first post to the full-width header, but the title of the taxonomy stays below it. Any chance to fix that?”

Here’s the code to fix the issue:

Basically, we used a conditional to display the full-width entry header only on single posts and single pages. As a result, it will not affect any archive pages.