Install ATR AM on Avada theme

Install ATR AM on Avada theme

Here is a css file for you to download in order to implement this ATR AM skin shown in this video:

  ATR AM black skin for Avada theme

In order to instrall ATR AM on a site that uses Avada theme, please follow these steps:

  1. You MUST use a child theme. DO NOT do any customization to the Avada theme itself. To see how to use child theme with Avada please read https://theme-fusion.com/avada-doc/special-features/avada-child-theme/
  2. In your child theme directory create a new folder and name it “templates” (w/o quotes)
  3. Go to /wp-content/themes/Avada/templates (The parent theme folder) and copy from it the file “header.php”
  4. Paste the copied file to the newly created folder (step 2) /wp-content/themes/Avada-Child-Theme/templates
  5. Open the file /wp-content/themes/Avada-Child-Theme/templates/header.php in a text editor
  6. Find the code (in Avada 5+ should be around line 199)
	$main_menu_args = array(
			'theme_location'  => 'main_navigation',
			'depth'           => 5,
			'menu_class'      => $menu_class,
			'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
			'fallback_cb'     => 'Avada_Nav_Walker::fallback',
			'walker'          => new Avada_Nav_Walker(),
			'container_class' => 'fusion-main-menu',
			'container' 	  => 'nav',
		);
  1. Comment these lines of code (Add // to the start of each line)
  2. After these commented lines add the following code
	$main_menu_args = array(
		'theme_location' => 'main_navigation',
		'menu_id' => 'primary-menu',
		'container'       => 'div',
		'echo'            => true,
		'items_wrap'      => '<div class="megamenu"><ul id="%1$s" class="%2$s">%3$s</ul></div>',							
		'container_class'    => 'LayoutGrid LayoutCenter PanelDiffuseShadow PanelFillExtraLight',
		'menu_class' => 'atr_accessible_megamenu',
		'walker'             => new atr_advanced_menu_walker()) ;
  1. Save and reload you site.
  2. Do not forget to set ATR AM options in the plugin settings page (Appearance -> Atr Advanced Menu Options)
  3. Pay special attention to the first option “CSS file url”