Avada theme

This documentation can help you put a slider under the top menu of the Avada theme.


Step 1

Go to the FTP of your website and create a child folder:


If you're using the default Child theme Avada comes with, jump to step 3.

Step 2

Create a style.css file in this folder:

/wp-content/themes/Avada-Child-Theme/ style.css

and write this code in it:

Theme Name: Avada Child
Template: Avada

Step 3

Create a functions.php file:

/wp-content/themes/Avada-Child-Theme/ functions.php

Write this code in it, just replace the shortcode with your slider's:

function smart_slider_header(){
    echo do_shortcode('[smartslider3 slider=315]');

add_action('avada_before_main_container', 'smart_slider_header');	

You have 3 good places, where you can put the slider:

  • avada_after_header_wrapper
  • avada_header
  • avada_before_main_container

These will put the slider either before the menu, between the menu and the breadcrumbs, or after the breadcrumbs. Replace the avada_before_main_container action with the one you want.

Want to show different sliders on different pages?

Here are a useful PHP functions to do it.


You want to show slider #1 on your home page and slider #12 on your About us page, which has the ID 1298. You can use a code like this:

function smart_slider_header(){
    if(is_home() || is_front_page()){
        echo do_shortcode('[smartslider3 slider=1]');
    } else if(get_the_ID()==1298) {
        echo do_shortcode('[smartslider3 slider=12]');
add_action('avada_before_main_container', 'smart_slider_header');	

Step 4

Activate your child theme.