Change Genesis Sample Themes Header & Nav To Width of Content Sidebar

The Genesis Sample child theme by StudioPress is a very popular free theme which i use for testing custom code.

In this tutorial, i’ll show you how to change the themes header and nav menu’s from full width like this:

To span the width of the content sidebar wrap like this:

There’s 2 steps you need to take to get the job done:

Add this CSS to the end of your child themes style.css file before the start of your Media Queries.

.site-header, 
.nav-primary,
.nav-secondary { 
    margin: auto; 
    max-width: 1200px; 
    padding-left: 50px; 
    padding-right: 50px; 
}

Then you simply find the CSS around line 900 of your style.css file which controls the width of your header right widget area and change the value for the width from 800px to auto like this:

.site-header .widget-area {
    float: right;
    text-align: right;
    width: auto;
}

This post is based on this question:

I want to design a website where the navigation bar only extends from the logo to the edge of the sidebar. In other words, about 1100 px wide rather than the full computer screen.

Related Tutorials

• Add Header Image Logo To Genesis 2.0 Sample Theme