A full height hero section on the front page is a common design element in many websites these days.
In this article I share sample code for setting this up in WordPress. The code improves upon what's there in certain themes by StudioPress like Digital Pro.
Step 1
Create a file named say home.js in your child theme directory having the following:
I am an independent WordPress web consultant with 10 years of experience in WordPress theme installation, customization, administration, maintenance, support, documentation, troubleshooting and PSD/design to WP.
Thank you very, very much, Sridhar. Adds that touch of elegance to the home hero :).
Just in case there’s other elements to account for before the home hero:
// Site header height
var headerHeight = $(‘.site-header’).outerHeight();
// Nav secondary height
var navHeight = $(‘.nav-secondary’).outerHeight();
// Viewport height minus combined heights of WordPress admin bar, site header and secondary nav
var newHeight = windowHeight – (barHeight + navHeight + headerHeight);
[…] this article I show how How to set height of an element to Viewport height using jQuery in WordPress tutorial can be implemented in Interior Pro for .after-header's full screen […]
Thank you very, very much, Sridhar. Adds that touch of elegance to the home hero :).
Just in case there’s other elements to account for before the home hero:
// Site header height
var headerHeight = $(‘.site-header’).outerHeight();
// Nav secondary height
var navHeight = $(‘.nav-secondary’).outerHeight();
// Viewport height minus combined heights of WordPress admin bar, site header and secondary nav
var newHeight = windowHeight – (barHeight + navHeight + headerHeight);
[…] seanv on How to set height of an element to Viewport height using jQuery in WordPress […]
[…] takes up the exact height of viewport minus admin bar (if present) minus the header height, per this […]
[…] this article I show how How to set height of an element to Viewport height using jQuery in WordPress tutorial can be implemented in Interior Pro for .after-header's full screen […]