Manual Integration: Avada
Please scroll down to see our integration guide for older versions of Avada. To integrate HeroMenu within Avada, follow the steps below very carefully.
Take Note:
All changes are done within the header.php file. Start by making a backup of this file. Please also note in future that theme updates by the author will overwrite the header.php. So make sure that when you do a theme update, also do this bit in the header.php file again.
Avada Header Template
In the Avada theme files, navigate to the header.php file. Find the code which looks like this (this line is truncated for simplicity).
<?php avada_header_template( 'below', ... ... ... ); ?>
Replace this line with the following:
<?php //HERO MENU $hmenu_main_menu = array( 'theme_location' => 'main_navigation' ); wp_nav_menu( $hmenu_main_menu ); ?>
Menu Location Settings
Navigate to Hero Menu » Settings » Menu Integration and set menu location to Main_navigation.
Avada Theme Options
Header Options
Navigate to Appearance » Theme Options » Header and set header position to Top and choose the first header layout option.
Sticky Header Options
Navigate to Appearance » Theme Options » Sticky Header and disable all the settings shown below.
Menu Options
Navigate to Appearance » Theme Options » Menu and disable the search icon within the Main Nav as shown below.
WooCommerce Options
Navigate to Appearance » Theme Options » WooCommerce and disable the WooCommerce cart icon within the Main Menu as shown below.
Manual Integration: Avada v3.8.0
Please scroll down to see our integration guide for older versions of Avada. To integrate HeroMenu within Avada 3.8, follow the steps below very carefully.
Take Note:
All changes are done within the header.php file. Start by making a backup of this file. Please also note in future that theme updates by the author will overwrite the header.php. So make sure that when you do a theme update, also do this bit in the header.php file again.
Avada Header Template
In the Avada theme files, navigate to Templates » header.php Find the code beginning on line 64 and ending on line 76 which looks like this.
<div <?php echo $header_wrapper_class; ?>> <div class="<?php echo sprintf( 'fusion-header-%s fusion-logo-%s fusion-sticky-menu-%s fusion-sticky-logo-%s fusion-mobile-logo-%s fusion-mobile-menu-design-%s%s', fusion_get_theme_option( 'header_layout' ), strtolower( fusion_get_theme_option( 'logo_alignment' ) ), has_nav_menu( 'sticky_navigation' ), $sticky_header_logo, $mobile_logo, strtolower( fusion_get_theme_option( 'mobile_menu_design' ) ), $sticky_header_type2_layout ); ?>"> <?php /** * avada_header hook * @hooked avada_secondary_header - 10 * @hooked avada_header_1 - 20 (adds header content for header v1-v3) * @hooked avada_header_2 - 20 (adds header content for header v4-v5) */ do_action( 'avada_header' ); ?> </div> </div>
Replace all code from line 64 until 76 with the following:
<?php //HERO MENU $hmenu_main_menu = array( 'theme_location' => 'main_navigation' ); wp_nav_menu( $hmenu_main_menu ); ?>
Menu Location Settings
Navigate to Hero Menu » Settings » Menu Integration and set menu location to Main_navigation.
Avada Theme Options
Header Options
Navigate to Appearance » Theme Options » Header and set header position to Top.
Manual Integration: Avada v3.7 and older
To integrate HeroMenu within Avada version 3.7 and older, follow the steps below very carefully.
Take Note:
All changes are done within the header.php file. Start by making a backup of this file. Please also note in future that theme updates by the author will overwrite the header.php. So make sure that when you do a theme update, also do this bit in the header.php file again.
Avada Header Template
In the Avada theme files, navigate to Framework » Templates » header.php Wrap all the code within the function below: Please note that the example code has been reduced to reduce page scroll.
<?php function avada_header_template( $slider_position = 'Below' ) { [ AVADA FUNCTION CODE ] }
To look like this:
<?php function avada_header_template( $slider_position = 'Below' ) { if( !class_exists( 'hmenu_backend' )) { [ AVADA FUNCTION CODE ] } }
The final header code should be similar to the example below:
<?php function avada_header_template( $slider_position = 'Below' ) { //IF STATEMENT TO WRAP ALL CODE WITHIN FUNCTION if( !class_exists( 'hmenu_backend' )) { global $smof_data; $c_pageID = get_queried_object_id(); if( $slider_position == 'Below' ) { $reverse_position = 'Above'; } else { $reverse_position = 'Below'; } if( ( ! $smof_data['slider_position'] || ( $smof_data['slider_position'] == $slider_position && get_post_meta( $c_pageID, 'pyre_slider_position', true ) != strtolower( $reverse_position ) ) || ( $smof_data['slider_position'] != $slider_position && get_post_meta( $c_pageID, 'pyre_slider_position', true ) == strtolower( $slider_position ) ) ) && ! is_page_template( 'blank.php' ) && get_post_meta($c_pageID, 'pyre_display_header', true) != 'no' && $smof_data['header_position'] == 'Top' ) { ?> <div class="header-wrapper<?php if($smof_data['header_shadow']): ?> header-shadow<?php endif; ?>"> <?php if($smof_data['header_layout']) { if(is_page('header-2')) { get_template_part('framework/headers/header-v2'); } elseif(is_page('header-3')) { get_template_part('framework/headers/header-v3'); } elseif(is_page('header-4')) { get_template_part('framework/headers/header-v4'); } elseif(is_page('header-5')) { get_template_part('framework/headers/header-v5'); } else { get_template_part('framework/headers/header-' . $smof_data['header_layout']); } } else { if(is_page('header-2')) { get_template_part('framework/headers/header-v2'); } elseif(is_page('header-3')) { get_template_part('framework/headers/header-v3'); } elseif(is_page('header-4')) { get_template_part('framework/headers/header-v4'); } elseif(is_page('header-5')) { get_template_part('framework/headers/header-v5'); } else { get_template_part('framework/headers/header-' . $smof_data['header_layout']); } } ?> <div class="init-sticky-header"></div> </div> <?php get_template_part('framework/headers/sticky-header'); ?> <?php } } // CLOSE IF STATEMENT FUNCTION }
Menu Location Settings
Navigate to Hero Menu » Settings » Menu Integration and set menu location to Main_navigation.
Avada Theme Options
Header Options
Navigate to Appearance » Theme Options » Header and set header position to Top.