Image Behind Header & Menu

The solution in this download folder enables you to :

• Move the primary menu inside the site header
• Display a image behind both the header & menu
• Center the header widget area between the site title and menu

Here’s what the solution in this tutorial produces :

The following video shows how it looks on both desktops and smaller screens.

Demo Video #

Shows the image covering the background of both the site header and nav menu containers.

Tested using the Metro Pro child theme by StudioPress.

Installation – Support Included #

There’s 4 steps using the files inside the download :

Step 1 – Copy & paste the PHP code from the functions.php file to the end of the Metro Pro themes functions file.

Step 2 – Copy & paste the CSS from the style.css file to the end of the Metro Pro themes style sheet and clear caching.

Related Tutorials

• Image Behind Header & Menu In Genesis Sample Theme
• Hero Image Behind Site Header & Menu With Text Overlay In Genesis Sample Theme