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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Full Width Header Image With Header Right Widget Content Over Image

Generally, you would use the built in custom header function when adding a image to your header.

The only problem is, when you use the custom header function coded into your child themes functions file, to add a full width header, your header right widget area no longer works.

To get around around this, you can use CSS to add your header image instead.

In this tutorial, i’ll provide the step by step instructions and CSS which results in something like this example:

full width image

As you can see in the above screenshot, the image extends full width of the site header, not full width of the screen.

The CSS in this tutorial is tested on the Magazine Pro child theme by StudioPress and may need modifying for use on other themes.

Register for full access

Reader Interactions

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 & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.