Shrinking side bar menu

Hey James,

Thank you for the inquiry.

You can try this script to toggle the display of the default menu and burger menu on scroll.

function av_custom_inline_script()
{
    wp_add_inline_script( 'jquery', 
        "
    (function($) {
        $(document).ready(function () {
            if (window.innerWidth > 989) {
                var burger = $('.html_header_sidebar #top div .av-burger-menu-main');
                var menu = $('.responsive.html_header_sidebar #header .av-main-nav > li').not('.av-burger-menu-main, .av-active-burger-item');
                $(window).scroll(function () {
                  if ($(this).scrollTop() > 200) {
                    burger.show();
                    menu.hide();
                  } else {
                    menu.show();
                    burger.hide();
                  }
                });
            } 
          });
    })(jQuery);
    "
    );
}
add_action( 'wp_enqueue_scripts', 'av_custom_inline_script' );

Best regards,
Ismael

• This reply was modified 1 year ago by Rikard.

Hi,

Thanks for pointing that out @guenni007 :-)

Best regards,
Rikard

Hi,
Please try wrapping Guenni007 code in a function if you are adding it to your child theme functions.php like this:

function custom_shrinking_sidebar_menu_script() { ?>
  <script>
(function($) {
  $(document).ready(function () {
      if (window.innerWidth > 989) {
          var header = $('#header');
          var main = $('#main');
          var burger = $('.html_header_sidebar #top div .av-burger-menu-main');
          var footer = $('.html_header_sidebar.html_header_left .av-curtain-footer.av-curtain-activated .av-curtain-footer-container');
          var menu = $('.responsive.html_header_sidebar #header .av-main-nav > li').not('.av-burger-menu-main, .av-active-burger-item');

          $(window).scroll(function () {
            if ($(this).scrollTop() > 200) {
              burger.show();
              menu.hide();
              header.css({'width': '120px', 'transition': 'all 1s ease'});
              main.css({'margin-left': '120px', 'transition': 'all 1s ease'});
              footer.css({ 'width': 'calc(100% - 120px)', 'margin-left': '121px'  });
            } else {
              menu.show();
              burger.hide();
              header.css({'width': '300px', 'transition': 'all 1s ease'});
              main.css({'margin-left': '300px', 'transition': 'all 1s ease'});
              footer.css({ 'width': 'calc(100% - 300px)', 'margin-left': '301px'  });
            }
          });
      } 
    });
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_shrinking_sidebar_menu_script', 99);

In my test this is working, thanks for sharing Guenni007!

Best regards,
Mike

Hi,

Thank you for the update.

1.) To add an alternate logo on scroll, please update the script with the following code.

function custom_shrinking_sidebar_menu_script() { ?>
    <script>
  (function($) {
    $(document).ready(function () {
        if (window.innerWidth > 989) {
            var html = $('html');
            var header = $('#header');
            var main = $('#main');
            var logo = $('.logo a'); 
            var logo_alt = $('<img src="IMAGE_URL_HERE" class="av-logo-on-scroll" height="100" width="300" alt="Griegos Farms" title="">').appendTo(logo).hide();
            var burger = $('.html_header_sidebar #top div .av-burger-menu-main');
            var burger_icon = burger.find('.av-hamburger');
            var footer = $('.html_header_sidebar.html_header_left .av-curtain-footer.av-curtain-activated .av-curtain-footer-container');
            var menu = $('.responsive.html_header_sidebar #header .av-main-nav > li').not('.av-burger-menu-main, .av-active-burger-item');
  
            $(window).scroll(function () {
              if ($(this).scrollTop() > 200) {
                burger.show();
                menu.hide();
                logo_alt.show();
                logo.hide();
                header.css({'width': '120px', 'transition': 'all 1s ease'});
                main.css({'margin-left': '120px', 'transition': 'all 1s ease'});
                footer.css({ 'width': 'calc(100% - 120px)', 'margin-left': '121px'  });
              } else {
                if(burger_icon.hasClass('is-active') == false)
                {
                    menu.show();
                    burger.hide();
                    logo_alt.hide();
                    logo.show();
                    html.css('overflow', 'auto');
                    header.css({'width': '300px', 'transition': 'all 1s ease'});
                    main.css({'margin-left': '300px', 'transition': 'all 1s ease'});
                    footer.css({ 'width': 'calc(100% - 300px)', 'margin-left': '301px'  });
                }
              }
            });
        } 
      });
  })(jQuery);
  </script>
    <?php
  }
  add_action('wp_footer', 'custom_shrinking_sidebar_menu_script', 99);

Make sure to update the logo or image URL in this line.

var logo_alt = $('<img src="IMAGE_URL_HERE" class="av-logo-on-scroll" height="100" width="300" alt="Griegos Farms" title="">').appendTo(logo).hide();

2.) To center align the burger menu, please add this css code.

@media only screen and (min-width: 989px) {

  /* Add your Desktop Styles here */
  #top .av-burger-menu-main.menu-item-avia-special a {
    text-align: center;
  }
}

2.5) :D

Best regards,
Ismael

Hi,

Thank you for the screenshots.

3.) We adjusted the script a bit to hide the initial logo on scroll and prevent it from reverting back while the burger overlay is active.

// https://kriesi.at/support/topic/shrinking-side-bar-menu/#post-1426577

4.) You can adjust the padding with this css code.

@media only screen and (min-width: 989px) {

  /* Add your Desktop Styles here */
  #top #av-burger-menu-ul {
    padding: 100px 0 !important;
  }
}

Best regards,
Ismael

Hi,

Did you remove the script? The alternate logo doesn’t display because it uses http instead of https. Please check the private field.

Best regards,
Ismael