I'm developing my own theme for Wordpress, using Underscores as a base. It has a fixed header at the top, the height of which will vary, depending on screen size.
To avoid content disappearing behind the header, I added an empty div at the top of the page template, called header-push, then in my header.php, I added the following function, which I run on page load. It checks for the height of the header in pixels, and sets my header-push div to the same height. Perhaps not the most elegant solution, but it's simple and it works!
function headerPad(){
var headerHeight = document.getElementById('masthead').clientHeight;
jQuery('.header-push').height(headerHeight);
}
At least, it works on most pages, until we get to woocommerce. I'd like any woocommerce notifications to appear at the very top of the page, flush underneath the header. To make this work, I added the following lines to the header function.
jQuery('.woocommerce-notices-wrapper').css('margin-top', headerHeight );
jQuery('.woocommerce-NoticeGroup').css('margin-top', headerHeight );
The first line works for general notifications like "You have added X to your cart" etc. Errors (e.g. if you try to submit an order without filling a mandatory field) behave differently. Instead of being inside woocommerce-notices-wrapper, those errors appear as an ul inside a woocommerce-NoticeGroup div. That's what the second line is for, but doesn't work.
Looking at the default page setup, woocommerce-notices-wrapper exists as an empty div on the page at all times, which loads on page load. woocommerce-NoticeGroup does not. I added an empty woocommerce-NoticeGroup div to my woocommerce page template, and it loads in with correct positioning on page load, but then if I generate an error, a second woocommerce-NoticeGroup div is added to the page and does not inherit the correct positioning.
The result is that any errors disappear behind the header. How might I go about ensuring that the height of the header is always applied at the top of errors?