Elementor nav menu dropdown align center

Elementor menu widget 下拉選單,預設靠左對齊,我找不到選項去調整子選單的對齊方式,想說用 CSS 下 text-align:center 就好,結果不是,Elementor子選單內的 a 標籤是用 flex 去對齊的,所以要用 flex 的方式去對齊

flex 內容置中

在這邊會透過下列 CSS 達成水平置中

justify-content: center;

如果要靠左,可以換成下列 CSS

justify-content: flex-end;

Step 1

下方 CSS 貼到主題的 style.css 文件,或貼到 menu widget 進階選項的自訂樣式欄位中,我自己是習慣寫在 style.css 以免時間一久自己寫在哪都找不到,造成維護不易

/**
 * Elementor nav menu dropdown align center
 * @link https://v123.tw/elementor-nav-menu-dropdown-align-center/
 * @author v123 <ann@vector.cool>
 */
@media (min-width: 1024px) {
    .full_center_dropdown nav ul {
        min-width: 100% !important;
    }

    .full_center_dropdown nav ul a {
        /* Align Center */
        justify-content: center;
        /* Align right */
        /* justify-content: flex-end; */
    }

    .full_center_dropdown ul.elementor-nav-menu--dropdown a,
    .full_center_dropdown ul.elementor-nav-menu--dropdown a:focus,
    .full_center_dropdown ul.elementor-nav-menu--dropdown a:hover {
        border: none;
    }
}

Step 2

記得要到 menu widget 進階選項的CSS類別填入 full_center_dropdown 然後儲存

Step 3

刪除所有快取,就會如下圖一樣。下拉選單的連接置中囉

參考資料:
https://github.com/elementor/elementor/issues/4991#issuecomment-564926152

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料