News Pro Slider Behind Site Header Elements

This solution adds a slider behind the site header elements of the News Pro theme by StudioPress. In this case it uses the Soliloquy slider however you can use any slider you wish.

Here’s what it looks like using slides which are 1140px width X 240px height.

The solution is coded to work both when the header search is added to the header right widget area and when it is not.

Demo Video #

Shows the responsive slider behind the site title, site description and search form in the header of the News Pro child theme.

Tested using the News Pro child theme by StudioPress.

Code Installation #

There’s 3 steps :

Step 1 – Create a new slider named slider using the following settings as a guide :

The width of the site header is 1140px so the width in the slider dimensions must be 1140px. The height can be anything you like however, please note that the CSS is written to work with a height of 240px. Any other height you use may require modification of the CSS.