A Method of Image Menu Navigation Based on AVADA Theme

Avada has powerful functions. Today, let's introduce how to use the Avada mega menu to implement the AVADA theme and how to implement the picture menu navigation bar (navigation picture)

Note: This article is based on Avada 6.02. If you are still a 4-series or 5-series version, it is recommended to upgrade, because if you do not upgrade, many bugs will appear later. The avada theme upgrade reference AVADA theme update method

Preparation content: Each level 1 classification corresponds to a picture with a width of 100~500px, and the height is adjusted proportionally. Generally, the width height ratio is 1.1 or 1.3:1. The specific width is adjusted according to the actual situation. The size of the picture demonstrated in this paper is 500 × 500. It is better if it is a hollow png format picture.

Today, I demonstrated six classifications, only one level classification, as shown below. If you have 8, 10 or 12 categories, it's OK, but it's better to have an even number for easy typesetting.

LED bulb
LED Streetlight
LED Flood light
LED spot light
LED High bay
LED Linear light

Generally, after we set the menu, we will achieve the following effect. Next, we will implement the image navigation effect step by step.

Enter the appearance menu, click the next level of image navigation you want to set, that is, the product I demonstrated, and then click avada menu options to set.

Fusion Mega Menu open

Full Width Mega Menu open

Mega Menu Number of Columns Select the appropriate number of columns. For example, if I have six classifications, you can select two rows and three columns, or six columns in a row. You can set it according to your actual situation.

Click Save to save the above three settings.

Next, we enter the first category to upload navigation pictures, click the small triangle on the LED Linear light menu to expand, click Avada menu options, click Upload image behind Mega menu thumbnail, and then upload the previously prepared category pictures.

Just drag it in. Then select the image corresponding to the LED the near light, fill in the alt tag, and click select.

You can see that the image has been inserted successfully. Then click save to save.

Next, use the same method to insert pictures for the remaining five categories, and then click Save on the menu to save.

2.1 Adjust the display size of the picture

The image has been added, but the size must be displayed incorrectly and needs to be readjusted. The size display is better. It is flexible and there is no fixed standard.

We usually use a layout with pictures on the top and text below. So the width of the picture should exceed the width of the text. The longest width of the six categories I demonstrated is about 180px, so let's tentatively determine that the width of this picture is 180px.

We use the following CSS code to adjust the display width and height of the image. Copy the following code to avada – theme options - Custom Css.

 .fusion-megamenu-icon{width:280px! important;margin-right:5px;margin-bottom:5px;}
 .fusion-megamenu-icon img{max-height:280px!important;}
 .fusion-megamenu-wrapper .fusion-megamenu-submenu .sub-menu a{padding:5px 10px!important;}
 .fusion-megamenu-wrapper .fusion-megamenu-submenu{padding:10px 0!important;}
 .fusion-megamenu-title{padding:0 10px 5px!important;}
 .fusion-megamenu-wrapper .fusion-megamenu-submenu:hover {background:#fc821b!important;}
 .fusion-megamenu-wrapper .fusion-megamenu-submenu:hover a{color:#fff!important;}
 .fusion-main-menu .sub-menu li a:hover{background:#333!important;}
 .fusion-megamenu .current-menu-item {background:#fc821b!important;}
 .fusion-megamenu .current-menu-item a{color:#fff!important;}

The display effect is as follows. Then change the values of width and max height to 180 (if your picture is not 1:1, the height will be changed to the corresponding value proportionally), and click Save in the lower right corner

Refresh the foreground again, and we can see that the picture has been enlarged. But this is not very nice. We usually put the text below the image, so we need to adjust the width of the image navigation at this time.

Let's go to avada – theme options – menu – mega menu, select custom width after Mega Menu Max Width, and then enter 608 in the box below. Note that this number is not fixed and needs to be adjusted according to your own actual situation.

After confirmation, click save change to save, and then refresh the foreground page. You can see that we have achieved the desired effect, the effect of the upper picture and the lower text.

2.2 Set the hover color

Next, let's adjust the hover and active colors of the image. My default color is orange. If you don't like this color or it doesn't match your website, you can enter a new color yourself.

The method is in the newly added css code. Change the color values of these two places to the color values you need, and then save and refresh to achieve the effect

2.3 Adjustment of other effects

The above method has basically made the effect of image navigation. I think it is enough, but if you want to do something else, you can also do it. For example, you can add a background to the whole picture navigation. The location is here.

I won't demonstrate it. You can study it yourself. It's not very difficult.

3.1 How to set secondary classification?

The method is similar to that above. It still uploads images in the first level classification. Level 2 classification does not need to upload pictures. The effect is as follows.

3.2 Are you sure to set according to the data above?

What I don't need is the method. As long as you learn the method, you can set it according to your own actual situation.

3.3 Can the width of featured navigation be wider than the site width?

Yes, for example, my site width is 1100, and you can set it to 1200, 1300 until it reaches its maximum value. You only need to set the number in the custom width.