Title: Replace Header with Parallax effect
Last modified: August 20, 2016

---

# Replace Header with Parallax effect

 *  [carn21](https://wordpress.org/support/users/carn21/)
 * (@carn21)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/replace-header-with-parallax-effect/)
 * I’m using the Twentyeleven theme and would like to replace the header image with
   a parallax effect I have worked out in another website using jquery and multiple
   DIVS that are stacked on top of each other. Can someone direct me to how I might
   go about doing this?

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/replace-header-with-parallax-effect/#post-3045342)
 * Do not edit the Twenty Eleven theme. It is the default WordPress theme and having
   access to an **unedited** version of the theme is vital when dealing with a range
   of site issues. First [create a child theme for your changes](http://codex.wordpress.org/Child_Themes).
 *  Thread Starter [carn21](https://wordpress.org/support/users/carn21/)
 * (@carn21)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/replace-header-with-parallax-effect/#post-3045345)
 * I’ve actually already created a child theme and have gotten everything looking
   how I want to. I would just like to have a section of images using a parallax
   effect below the nav where the header images are. Don’t know the best way to 
   go about doing that.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/replace-header-with-parallax-effect/#post-3045353)
 * Um – you lost me a bit now… The header image is above the nav in Twenty Eleven.
   So do you want to replace that image or add something additional below the nav?
   Only the placement determines which template file you’ll be customising in your
   child theme.
 *  Thread Starter [carn21](https://wordpress.org/support/users/carn21/)
 * (@carn21)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/replace-header-with-parallax-effect/#post-3045354)
 * O sorry. I swapped the position of the nav and the header. I have the nav as 
   a fixed position element at the top, so the page scrolls behind it. What I’d 
   like to do is insert a parallax effect below the nav, so that when you scroll
   down the page, it engages the parallax effect.
 *  [esmi](https://wordpress.org/support/users/esmi/)
 * (@esmi)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/replace-header-with-parallax-effect/#post-3045362)
 * Ah! That means you definitely still need to be customising header.php. assuming
   your jQuery is in a separate file, you can enqueue it in the child’s functions.
   php file using something like:
 *     ```
       function my_jquery_init() {
       	wp_enqueue_script('my-script',
       	get_stylesheet_directory_uri() . '/js/myscript.js',
       	array('jquery'),
       	false
       	);
       }
       endif;
       add_action('template_redirect', 'my_jquery_init');
       ```
   
 * **Do **remember to ensure that your script uses [no-conflict wrappers](http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers).
 * Then it’s just a case of adding your div blocks before `</header>` in the theme.
   Obviously this is all very general. I, personally, have absolutely no idea how
   a parallax effect works. 🙂
 *  [kenneth.von.rauch](https://wordpress.org/support/users/kennethvonrauch/)
 * (@kennethvonrauch)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/replace-header-with-parallax-effect/#post-3045489)
 * @ carn21
 * I just found your post and it occurred to me that you may want to check [this tutorial](http://webdesy.com/wordpress-tutorials/parallax-scrolling-builder/),
   which explains how to easily add a parallax effect to your WordPress theme (any
   theme!). You’ll just have to use the Parallax Background Builder that allows 
   you to create this effect in a very user friendly way.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Replace Header with Parallax effect’ is closed to new replies.

 * 6 replies
 * 3 participants
 * Last reply from: [kenneth.von.rauch](https://wordpress.org/support/users/kennethvonrauch/)
 * Last activity: [13 years, 8 months ago](https://wordpress.org/support/topic/replace-header-with-parallax-effect/#post-3045489)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics