Altitude Pro Background Image Effect in Parallax

[jbendiner]

If you check StudioPress' Altitude Pro demo, you will notice that in the Home Page the main/top background image 'includes' also the header/logo/menu section. Once you start scrolling down, the header section background switches to a fixed background color.

In the Parallax theme this feature is not apparently available. Is it possible to replicate the Altitude Pro effect?

Thank you.
Jerry

http://www.technologix.ca

[Christoph]

Hi Jerry,

sorry it took so long to get an answer to your question.

Yes, it is possible.
You need to make changes to the css and add some jQuery.
In Parallax Pro's style.css change the background-color in .site-header to transparent and set margin-top: 0; in .parallax-home .site-inner.

If you have access to Altitude Pro, you can copy parts of the css and jQuery into Parallax Pro.
If you don't own that theme, you can get the information from demo.studiopress.com/altitude with the Chrome Inspector.

From ALTITUDE Pro's global.js, copy lines 3 to 17 and paste them into PARALLAX Pro's parallax.js, right underneath jQuery(function( $ ){
(This is just so you don't have to enqueue an additional file)

From ALTITUDE Pro's style.css copy every selector that contains .dark into PARALLAX Pro's style.css.

http://screencast.com/t/QUn2UE7I

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[jbendiner]

Hi Christoph,
Really appreciate your reply and the details in it.
I will give it a try!

Thank you.
Jerry

[Author]

Posts