yes - please load the Prism script to better visualize the source code.
Ja - lade das Prism script um den Code besser lesen zu können

Load Content / Inhalt laden

Fullscreen Slider

is fullwidth on small screens – best would be to give a
unique ID to that Slider :
f.e. united_slider

the media-query has a start on  hamburger breakpoint – here on 990px

the images on the slider have : W= 1500px  H=843px
so an aspect ratio of  0.56  resulting here in the css code to an image-height of 56vw

By the way: This CSS code is the only one needed to achieve the result of a fullwidth appearance.


@media only screen and (max-width:989px) {
	#united_slider .avia-slideshow.av_fullscreen {
	    width: 100vw !important;
	    height: 56vw !important;

this is just for positioning the header on bigger screens.


@media only screen and (min-width: 990px) {
	.page-id-35721 #header {
	  bottom: 30px;
	} .av_header_glassy.av_header_transparency .header_bg {
	   opacity: 0.4 !important;
	   background-color: #000;

Slider Move to above the header

as a result of a request on the board

this is a little debouncing function ( for resize events )
for scroll events a throttling function would be better

function add_debounce_function(){
function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
add_action('wp_footer', 'add_debounce_function');

In this case only for this Page-ID – with the debounce function from above the window width is measured every 50ms.

function slider_before_header(){
if(is_page(35721))	{
	var fullscreenSlider = $("#united_slider.avia-fullscreen-slider");

	$(window).on('load resize', debounce(function (event) {		
		var winWidth = $(window).width();
		if (winWidth < 990) {
		else {
	}, 50));
add_action('wp_footer', 'slider_before_header');