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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems