Avada的功能強大，今天來介紹下使用Avada mega menu 來實現AVADA主題實現圖片菜單導航欄的方法（導航圖片）

注：本文基于Avada 6.02, 如果你還是4系或者5系的版本，建議升級，因為如果你不升級的話，后面會出現很多bug，avada主題升級參考AVADA主題升級更新的方法

準備內容:?每一個1級分類對應一張圖片，寬度100~500px不等，高度按比例調，一般寬高比是1.1或1.3:1等，具體的寬度根據實際情況調整，本文示范的圖片的尺寸為500×500。如果是鏤空的png格式圖片更好。

我今天示范的是6個分類，只有一級分類，如下。如果你有8個，10個，12個分類也沒問題，不過最好是偶數個，便于排版。

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

本文目錄如下

• 1. 設置圖片導航并上傳圖片
• 2. 調整圖片的尺寸和Hover效果
• 3. 常見問題

1. 設置圖片導航并上傳圖片

一般我們設置菜單之后是下面這種效果，接下來我們就要一步步來實現圖片導航的效果。

進入appearance - menus 菜單下面，點開你要設置圖片導航的上一級，也就是我示范的product，然后點擊avada menu options進行設置。

Fusion Mega Menu?打開

Full Width Mega Menu?打開

Mega Menu Number of Columns?選擇合適的列數，比如我的是6個分類那就選擇2行三列，也可以一行6列，你可以根據你的實際情況來設置。

上面三項設置好之后點擊Save保存。

?

接下來我們進入第一個分類上傳導航圖片，點擊LED Linear light菜單上的小三角展開，然后點擊Avada menu options，然后在Mega menu thumbnail 后面點 Upload image，然后把之前準備好的分類圖片上傳上去。

?

直接拖進去就可以。再選擇LED the near light 對應的圖片，然后把alt標簽填一下，再點擊select。

就可以看到這個圖片已經插入成功了。然后再點擊save保存。

?

接下來用相同的方法，對剩余的5個分類分別插入圖片，最后點擊菜單上面的save保存。

2. 調整圖片的尺寸和Hover效果

2.1 調整圖片的顯示尺寸

圖片已經添加上去了，但是尺寸肯定顯示不對，需要重新調整，那么尺寸顯示多大比較好，這個比較靈活，沒有固定的標準。

我們一般采用圖片在上面，然后文字在下面的這樣一個布局。所以圖片的寬度要超過文字的寬度。我示范的這6個分類的最長的寬度在180px左右，所以我們先暫定，這個圖片的寬度為180px。

我們通過以下CSS代碼來調整圖片的顯示寬度和高度。復制以下代碼到avada - theme options- Customs 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;}

顯示效果如下，然后把width 和max-height這兩個參數后面的值數字全部改成180（如果你的不是1:1的圖片，那么高度就按比例換成相應的值）然后點擊右下角的保存

再刷新一下前臺，我們可以看到，圖片已經放大了。但是這樣不是很好看，我們一般的把文字放在圖片的下面，所以這個時候我們需要去調整一下這個圖片導航的寬度。

?

我們還是進入avada - theme options - menu - mega menu , 然后Mega Menu Max-Width后面選擇custom width， 然后在下面的框里面輸入608。注意這個數字不是固定的，需要根據你自己的實際情況來調。

確定之后點save change保存，然后刷新前臺頁面。就可以看到已經達到了我們預期的效果，上圖片下文字的效果。

2. 2 設置hover顏色

接下來我們來調整一下圖片的hover還有active兩種顏色。我默認設置的顏色是橙色，如果你對這個顏色不喜歡，或者跟你的網站不搭配的話，你可以自己去輸入一個新的顏色。

方法就是在剛剛添加的css代碼當中。把這兩個地方的顏色值換成你自己需要的顏色值，然后保存刷新就可以有達到效果了

2.3 其他效果調整

上面講到的方法已經把圖片導航的效果基本做出來了，我認為已經夠用了，但是如果你還想折騰一下其他的效果也可以。比如你可以給整個圖片導航加一個背景，位置在這里。

具體我就不演示了，你可以自己來研究一下，也不是很難。

3. FAQ

3.1 如果有二級分類要怎么設置？

方法，跟上面的差不多，仍然是在第1級分類那里上傳圖片。第2級分類不需要上傳圖片。效果如下。

3.2 是否一定按你這上面的數據來設置？

不需要的，我寫的是方法，只要你學會了方法，你完全可以按照你自己的實際情況來進行設置。

3.3 特色導航的寬度能不能更寬一些，超過site width?

可以的, 比如說我的site width寬度為1100，你可以設置為1200, 1300直到它的最大值。具體只需要在custom width里面去設置那個數字就可以。

總結

以上是生活随笔為你收集整理的wordpress AVADA主题实现图片菜单导航的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。