• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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:

header full width

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

custom header

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

Reader Interactions

Comments

  1. Pavle says

    October 27, 2014 at 11:40 am

    Amazing tutorial, just what I was looking for, thank you!

    Log in to Reply
    • Brad Dalton says

      October 27, 2014 at 11:53 am

      Thanks Pavle

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis & WooCommerce.

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Contact
  • Terms
  • Genesis WP Tags
  • WooCommerce
 

Loading Comments...
 

You must be logged in to post a comment.