-
AuthorPosts
-
May 6, 2020 at 3:01 pm #1210358
Hi,
I would like to display widgets inside the burger menu. I followed your documentation to create a widget area inside the header. Its working fine on desktop but on mobile the widgets are displayed outside the burger menu. I tried to add these widgets via the wordpress filters > add_filter(‘wp_nav_menu_items’, ‘my_widgets’, 10, 2); (then my function)Once again it works for desktop but on mobile the widgets are not displayed at all since enfold creates a html duplicate of the main menu to create the burger menu.
Do you have any hook I can use to add custom content to the burger menu ?
Thank you.
Best regards.
May 9, 2020 at 5:18 am #1211335Hey graphicdreamer,
I think you can try this: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ then just adjust the css code from there I think only top and left properties needs to be adjusted. Hope this helps.
Best regards,
Jordan ShannonMay 11, 2020 at 10:07 am #1211780Hi,
As I said in my previous message. I already tried that. The widget is displayed correctly but beside the burger menu. Not inside as I want it.
So no sorry but it does not help :/
Best Regards,
AntoineMay 11, 2020 at 3:15 pm #1211849well i used the hook: ava_main_header to create a header widget
this to child-theme functions.php
add_action( 'ava_main_header', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); }
and afterwards i moved the containers in Markup.
function move_header_widget_to_burger(){ ?> <script> (function($){ $('#header_main .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 = $('#header_main .widget').detach(); burger_widget.each(function() { $(this).appendTo('.av-burger-overlay-inner').css({ 'display' : 'block', 'position': 'relative', 'width': '94%', 'text-align': 'left', 'margin-left': '3%', 'border-top': '1px dashed #333', }); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'move_header_widget_to_burger');
see here: https://webers-testseite.de/pureinstall/
May 11, 2020 at 5:20 pm #1211871it seems that the each(function… is not necessary so try first :
( from my understanding this will be ok – but it works without too! )function move_header_widget_to_burger(){ ?> <script> (function($){ $('#header_main .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 = $('#header_main .widget').detach(); burger_widget.appendTo('.av-burger-overlay-inner').css({ 'display' : 'block', 'position': 'relative', 'width': '94%', 'text-align': 'left', 'margin-left': '3%', 'border-top': '1px dashed #333', }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'move_header_widget_to_burger');
May 12, 2020 at 5:02 am #1211995Hi,
Thanks a lot of helping out @guenni007, did you try that out @graphicdreamer?
Best regards,
RikardMay 12, 2020 at 3:44 pm #1212211Hello Gentlemen,
The function of @guenni007 did the trick. Both solution worked. I just edited css and .appendTo to .insertBefore to put the widget where I wanted.
I always forget wordpress is not only php hooks.
Thank you all for your help.
Best regards.
May 12, 2020 at 6:13 pm #1212287i was looking for a php hook – but found no place to inject a widget area.
the main place where the hamburger is prepared is avia.js. – And to have a whole child-theme avia.js is no good alternative.maybe Günter knows a better way.
May 13, 2020 at 9:06 am #1212528Hi,
I guess having a new widget area for the burger menu would be a good new feature for enfold. Just to keep social icons on mobile would be worth it. Having to deal with php functions and JS for this while it should be easier (IMO) could be scary for wordpress/enfold beginners.
A php hook would be nice if it is added to the knowledge base. Let’s see what Günter has got in his sleeve ;)
May 13, 2020 at 8:40 pm #1212753Hi graphicdreamer,
Well, I forwarded this as a feature request, but it’s not guaranteed that it will be implemented any soon.
Best regards,
VictoriaMay 14, 2020 at 10:38 am #1212890Hi Victoria,
No problem for me. Thank you for the update ;)
You can close this thread as it is resolved
Best regards;
AntoineMay 14, 2020 at 8:16 pm #1213025Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Widget inside burger menu’ is closed to new replies.