• 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

Add Responsive Full Width Background Image To Altitude Pro Site Header

This solution enables you to display a full width image behind the site header in the Altitude Pro child theme by StudioPress. You can set the default image named header.jpg in your child themes images folder or change the image using the WordPress customizer.

full-width-background

Instructions

After downloading the folder for members below, follow these simple steps:

Note: Don’t copy the opening php tag from any files!

Step 1 : Using a code editor, add the PHP code from the functions.php file to your child themes functions file.
Step 2 : Copy and paste the js files from the js folder to your child themes js folder.
Step 3 : Copy the PHP code from the customize.php file inside the lib folder to the customize.php file in your child themes lib folder. Or, you can add this code to your functions file.
Step 4 : Upload your default header.jpg image to your child themes images folder.
Step 5 : Follow the CSS modifications below.

CSS Modifications

Line 1132, remove the CSS rule which adds a bottom border:

.nav-secondary {
	border-bottom: 1px solid #fff;
}

Also line 922, remove this:

.featured-section .site-header > .wrap {
	border-bottom: 1px solid #fff;
}

Here’s the code logged in members can download.

Register for full access

Altitude Pro

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.