Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 17, 2023 at 8:44 am #1404650
    spooniverse

    Dear Support-Team,

    I am using a fullwidth submenu on some blog subpages. I would like to integrate it in one of my archive pages as well. Therefore I grabbed the shortcode for the submenu in debug mode:

    [av_submenu which_menu='' menu='test' position='right' color='header_color' mobile='active' mobile_switch='av-switch-990' alb_description='' id='tax-menu' custom_class='' template_class='' av_uid='av-lgihyc11' sc_version='1.0'][/av_submenu]

    If I place it on normal pages there is no problem whatsoever, but when I put it in the archive.php with “do_shortcode” the layout of the archive kind of breaks. Some parts are loaded correct, but most of it not.

    Any advice on how to tackle that problem?

    Kind regards,
    Daniel

    April 19, 2023 at 1:24 am #1404873
    Mike

    Hey Daniel,
    Try adding your submenu with a function in your child theme functions.php like this:

    add_action('ava_after_main_container', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if(is_archive()) {
		echo do_shortcode("[your submenu shortcode here]");
	}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

    Best regards,
    Mike

    April 25, 2023 at 9:42 pm #1405599
    spooniverse

    Hey Mike,

    I have done some additional testing. The problem has nothing to do with the archive template. Your code brings the submenu on the archive page – my change to the archive.php too, nothing wrong with that.

    If the submenu is generated with a shortcode it comes to styling problems. On archives but on normal pages too. If I place the submenu element from within the ALB onto a page everything works finde. If I place the submenu as shortcode on a page (for example with a codeblock element) the CSS breaks and the HTML structure looks different if you compare both variants.

    Any idea why? How can I use a submenu with a shortcode?

    All the best, Daniel

    April 27, 2023 at 3:11 am #1405760
    Mike

    Hi,
    I believe you are seeing this on single posts or archives with a sidebar, so to work with this try copying the html of the submenu, on my example post I used this:

    <div id="sub_menu1" class="av-submenu-container main_color av-sticky-submenu container_wrap sidebar_right" style="z-index: 301; top: auto; position: absolute;"><div class="container av-menu-mobile-disabled av-submenu-pos-center"><ul id="av-custom-submenu-1" class="av-subnav-menu"><li class="menu-item menu-item-top-level menu-item-top-level-1"><a href=""><span class="avia-bullet"></span><span class="avia-menu-text">Menu Item 1</span></a></li><li class="menu-item menu-item-top-level menu-item-top-level-2"><a href=""><span class="avia-bullet"></span><span class="avia-menu-text">Menu Item 2</span></a></li></ul></div></div>

    you will note that it is important to not have any line breaks in the html.
    It is also important to copy the div before: <div class="clear"></div> and after: <div class="sticky_placeholder" style="height: 51.4375px;"></div>
    To test you can use the code in my example below, this is the script to add to your child theme functions.php:

    function custom_sub_menu_script() { ?>
  <script>
(function($){	
    var sub_menu = '<div class="clear"></div><div id="sub_menu1" class="av-submenu-container main_color av-sticky-submenu container_wrap sidebar_right" style="z-index: 301; top: auto; position: absolute;"><div class="container av-menu-mobile-disabled av-submenu-pos-center"><ul id="av-custom-submenu-1" class="av-subnav-menu"><li class="menu-item menu-item-top-level menu-item-top-level-1"><a href=""><span class="avia-bullet"></span><span class="avia-menu-text">Menu Item 1</span></a></li><li class="menu-item menu-item-top-level menu-item-top-level-2"><a href=""><span class="avia-bullet"></span><span class="avia-menu-text">Menu Item 2</span></a></li></ul></div></div><div class="sticky_placeholder" style="height: 51.4375px;"></div>';
  $('#top.archive,#top.single-post').each(function(){
    $(sub_menu).insertBefore( ".container_wrap_first" );
  });
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'custom_sub_menu_script');

    this will show the submenu on single posts and archive pages, see the two links to my test pages below.
    Enfold_Support_1885.jpeg

    Best regards,
    Mike

    April 27, 2023 at 10:02 am #1405790
    spooniverse

    Hey Mike,

    I will give it a try – but the menu will be hard coded in the end, or am I wrong? Within the submenu shortcode I can specify a flexible menu based on WordPress settings. That would be a welcomed feature.

    Any idea on why the shortcode isn’t working? Because for me it breaks the layout everywhere, not only on single posts or archives with a sidebar, as you asumed. A page with an added submenu only looks good if the submenu is created with the ALB.

    All the best,
    Daniel

    April 27, 2023 at 12:28 pm #1405819
    Mike

    Hi,
    Yes, the menu will be in the code, and if you want to change it in the future you would change the code.
    Injecting the shortcode seems to depend on what elements are used on the page, for me it works fine on a product page or a post without a sidebar.
    But the solution above works correctly and doesn’t break the layout, give this a try.

    Best regards,
    Mike

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