Move logo and header widget behind #main content

Hey Daniel,

Sorry for the late reply!

Child elements would inherit z-index value from their parent so using only CSS that would not be easily possible. You could use jQuery to hide logo and header widget when scrolled down. Please try adding following code to bottom of functions.php file in Appearance > Editor

function add_hide_logo(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 200) {
		jQuery('span.logo').addClass('hidden');
	} else {
		jQuery('span.logo').removeClass('hidden');
	}
});
</script>
<?php
}
add_action('wp_footer', 'add_hide_logo');

Best regards,
Yigit

Hi Daniel,

I am afraid, I do not however it is possible to add fade in/fade out to transition so it would slowly fade out when scrolled down. Would that help?

Best regards,
Yigit

Hi,
Sorry for the late reply, this function will move the header widget, logo, and the search after the #main and applies z-index so they are fixed and under the content scroll.
Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
$( '#wrap_all' ).each(function() {
$( this ).find( 'span.logo' ).insertAfter( $(this).find('div#main') );
$("span.logo").css({ 'position': 'fixed','z-index': '0' });

$( this ).find( 'div#search-2' ).insertAfter( $(this).find('div#main') );
$("div#search-2").css({ 'position': 'fixed','z-index': '0','right': '10em' });

$( this ).find( 'div#custom_html-3' ).insertAfter( $(this).find('div#main') );
$("div#custom_html-3").css({ 'position': 'fixed','z-index': '0','right': '10em' });
});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');

and then add this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top #wrap_all #search-2 {
	top: 70px !important; 
}
#top #custom_html-3 {
	top: 40px !important;
}
#top #custom_html-3 .custom-html-widget {
	height: 238px;
    width: 200px;
}

Then clear your browser cache and check.
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
Thank you for the feedback, please remove the function above, I will re-write it with the 990 brake point and remove the css so it can be adjusted with the other css.
You can use media queries in your css to adjust for certain screen sizes,

@media only screen and (min-width: 990px) and (max-width: 1400px) { 
.your {
css: here;
}
}

Best regards,
Mike

Hi,
It seems like the function above is still active, please remove it and the css so I can write and test the new script.

Best regards,
Mike

Hi,
Thank you, please also look in your child theme style.css for:

    #search-2,
    div.avia-search-tooltip {
        top: 30px !important;
        left: -30px;
    }

and change to:

    div.avia-search-tooltip {
        top: 30px !important;
        left: -30px;
    }

Then add this css:

@media only screen and (min-width: 989px) { 
#top #wrap_all #search-2 {
	top: 70px !important; 
	right: 12%;
}
#top #custom_html-3 {
	top: 40px !important;
	right: 12%;
}
#top #custom_html-3 .custom-html-widget {
	height: 238px;
    width: 200px;
}
}
@media only screen and (max-width: 988px) { 
#top #wrap_all #search-2 {
    top: 30px !important;
    right: 20px;
}
#top #custom_html-3 {
	top: 40px !important;
	right: 2%;
}
#top #custom_html-3 .custom-html-widget {
	height: 238px;
    width: 200px;
}
}
@media only screen and (max-width: 767px) { 
	.responsive #top .logo {
		top: 0 !important; 
	}
	.logo a {
    top: 0px !important; 
	}
	#top #wrap_all #custom_html-3 {
		top: 0px !important;
	}
}

and this function in your functions.php:

function custom_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  	var width = $(window).width()
  	if ((width >= 989)) {
$( '#wrap_all' ).each(function() {
$( this ).find( 'span.logo' ).insertAfter( $(this).find('div#main') );
$("span.logo").css({ 'position': 'fixed','z-index': '0' });

$( this ).find( 'div#search-2' ).insertAfter( $(this).find('div#main') );
$("div#search-2").css({ 'position': 'fixed','z-index': '0' });

$( this ).find( 'div#custom_html-3' ).insertAfter( $(this).find('div#main') );
$("div#custom_html-3").css({ 'position': 'fixed','z-index': '0' });
});
} else {
$( '#wrap_all' ).each(function() {
$( this ).find( 'span.logo' ).insertAfter( $(this).find('div#main') );
$("span.logo").css({ 'position': 'fixed','z-index': '501' });

$( this ).find( 'div#search-2' ).insertAfter( $(this).find('div#main') );
$("div#search-2").css({ 'position': 'fixed','z-index': '501' });

$( this ).find( 'div#custom_html-3' ).insertAfter( $(this).find('div#main') );
$("div#custom_html-3").css({ 'position': 'fixed','z-index': '501' });
});	
}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');

Then clear your browser cache and check.

Best regards,
Mike

Hi,
When testing the elements in the developer tools for mobile, please try refreshing the page first, this corrects the fixed items behind the header. This occurs because the browser doesn’t recognize the change in the window width on manual resize.
In the real world a user’s screen size doesn’t change from desktop to mobile without a fresh page load.
To change the visibility of your header elements when the burger menu is clicked try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_visibility_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  	var width = $(window).width()
	if ((width <= 768)) {
$( '.menu-item-avia-special' ).click(function(){
$("span.logo").css({'visibility': 'hidden' });
$("div#search-2").css({'visibility': 'hidden' });
$("div#custom_html-3").css({'visibility': 'hidden' });
});
} else {
$("span.logo").css({'visibility': 'visible' });
$("div#search-2").css({'visibility': 'visible' });
$("div#custom_html-3").css({'visibility': 'visible' });	
}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_visibility_script');

Best regards,
Mike

Hi,
As I understand you would like the content to scroll over the header and menu & widgets, please try this css:

#header {
    z-index: 0 !important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, so the issue is the “Corona maatregelen” box in #custom_html-4 being on top of the content on scroll.
The #header z-index of 501 is affecting the widget even if it is set to zero. I believe this is because the #custom_html-4 is in the inner-container div, where the #custom_html-3 widget is in the #wrap_all div above the #header div, so the z-index of 501 doesn’t affect it.
Are you using the same hook for the #custom_html-4 widget area as you did for #custom_html-3?
Can I login and fiddle with it and the script?
So the goal is to show this box above 767px, but on scroll it needs to be behind the content?
If we can’t put #custom_html-4 in the #wrap_all div, or sort out the z-index, can we just hide it on scroll?

Best regards,
Mike

Hi,
Ok, please try this script to hide the box on scroll, try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_messagebox_script() { ?>
<script>
(function ($) { 
  $(window).scroll(function() {    
      var scroll = $(window).scrollTop();
      if (scroll >= 20) {
          $("#avia-messagebox-").hide();
      } else {
          $("#avia-messagebox-").show();
      }
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_messagebox_script');

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for sharing your solution, the fadeTo is nicer :)
Unless there is anything else we can assist with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Sorry for the late reply, please try changing the z-index of the element like this:

(function ($) { 
          $(window).scroll(function() {    
              var scroll = $(window).scrollTop();
              if (scroll >= 20) {
                  $("#avia-messagebox-").stop().fadeTo('fast', 0).css({'z-index':'0'});
              } else {
                  $("#avia-messagebox-").stop().fadeTo('slow', 1).css({'z-index':'10'});
              }
          });
        })(jQuery);

I’m not sure that the z-index of “10” is correct for when it is in view, so please try adjusting this to suit.
If this doesn’t help, please include an admin login in the private content area so I can test.

Best regards,
Mike