Display hamburger menu in shrinking header

Hey todd0218,
Sorry for the late reply, to have the menu change on scroll, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#header.header-scrolled-full .av-burger-menu-main.menu-item-avia-special {
	display: block;
}
#header.header-scrolled-full .av-main-nav .menu-item {
    opacity: 0;
    pointer-events: none !important;
}

To have the menu disappear on scroll about midway we will have to add a class to the header, Try adding this code to the end of your functions.php file in Appearance > Editor:

function custom_header_scrolled_script(){
  ?>
  <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll >= 1200) {
    $('#header').addClass('header-scrolled-middle');
   } else {
    $('#header').removeClass('header-scrolled-middle');
   }
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'custom_header_scrolled_script');

Then add this css:

#header.header-scrolled-middle,
#header.header-scrolled-middle #header_main .inner-container {
    max-height: 0;
}
#header.header-scrolled-middle .av-burger-menu-main.menu-item-avia-special {
	display: none;
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to hear this helped, as for moving your burger menu to the right, you css seems to only move it about 20px, correct?
I would recommend removing this css and move the burger menu by making the “av-main-nav-wrap” container 100% width, and then float the “menu-item-avia-special” to the right.
This may move it too far, so try different widths, like 80%
Do you have a mockup of the burger menu placement?

Best regards,
Mike