Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 17, 2021 at 10:58 am #1294890
    JBkvns

    Hi,

    So I want to add some extra info in the hamburger menu overlay with widget. Or, best solution would be if I could implement the footer which is a page, in the menu overlay. No idea how to do this so I thought let’s start with a single widget.

    I followed this topic: https://kriesi.at/support/topic/widget-inside-burger-menu/#post-1211871 and this works!
    The problem is I alreay use the header widget to display a button. So what I need to do is add a header-two (this is no problem), but I can’t figure out how to tweak the code in this post https://kriesi.at/support/topic/widget-inside-burger-menu/#post-1211871 so the first header widget will stay in the header en header-two will move to the menu overlay.

    Any thoughts ;-)

    Thanks!!

    April 17, 2021 at 1:29 pm #1294899
    Guenni007

    you can take a different hook – you don’t need the header as widget area:
    f.e: there is :

    ava_after_body_opening_tag

    so place this to your child-theme functions.php:

    add_action( 'ava_after_body_opening_tag', 'burger_widget_area' );
function burger_widget_area() {
  dynamic_sidebar( 'burgerwidget' );
}

    and then : 

    function body_widget_to_burger(){
?>
<script>
(function($){
  $('body > .widget').css('display' , 'none');
  $('#header').one('click', '.av-main-nav-wrap', function() {
    var isMobile  = $('.av-burger-menu-main').css('display');
    $('#top #av-burger-menu-ul').css({
      'display' : 'block',
      'height' : 'auto',
      'vertical-align' : 'top',
      'padding' : '140px 0 0',
    });
    var burger_widget = $('body > .widget').detach();
    
    burger_widget.each(function() {
      $(this).appendTo('.av-burger-overlay-inner').css({
        'display' : 'block',
        'position': 'relative',
        'width': '84%',
        'text-align': 'left',
        'margin-left': '8%',
        'border-top': '1px dashed #333',
      });
    });
    
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'body_widget_to_burger');

    create a widget area : burgerwidget
    place in this area all your “hamburger widgets”

    April 17, 2021 at 1:34 pm #1294900
    JBkvns

    Hero!
    Works like a charm.
    Thanks!!!

    April 20, 2021 at 6:28 am #1295425
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.