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 如何处理网站访客的留言资料