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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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 Theme

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