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:
- 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/
- In your child theme directory create a new folder and name it “templates” (w/o quotes)
- Go to /wp-content/themes/Avada/templates (The parent theme folder) and copy from it the file “header.php”
- Paste the copied file to the newly created folder (step 2) /wp-content/themes/Avada-Child-Theme/templates
- Open the file /wp-content/themes/Avada-Child-Theme/templates/header.php in a text editor
- 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', );
- Comment these lines of code (Add // to the start of each line)
- 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()) ;
- Save and reload you site.
- Do not forget to set ATR AM options in the plugin settings page (Appearance -> Atr Advanced Menu Options)
- Pay special attention to the first option “CSS file url”