WordPress+elementor实现功能教程汇总

一、下滑固定导航栏

在 Elementor 中选中蓝色导航栏所在的 Container/Section，不要选整个 Header，然后：

1. 进入 Advanced → Motion Effects
2. 设置：
   • Sticky：Top
   • Sticky On：Desktop / Tablet / Mobile
   • Offset：0
3. 在 Advanced → Layout 中将 Z-index 设为 9999
4. 如果导航就一行，进行上面操作就行了，如果导航是2航，就需要添加css代码，编辑容器–高级–Custom CSS。

/* 固定后的导航栏样式 */
.siphia-sticky-nav.elementor-sticky--effects {
    width: 100%;
    z-index: 9999 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

/* 登录 WordPress 后，避开顶部黑色管理栏 */
body.admin-bar .siphia-sticky-nav.elementor-sticky--effects {
    top: 32px !important;
}

/* 手机端 WordPress 管理栏高度不同 */
@media (max-width: 782px) {
    body.admin-bar .siphia-sticky-nav.elementor-sticky--effects {
        top: 46px !important;
    }
}

这样页面下滑到第2菜单栏时，它会固定在顶部，导航第一行隐藏。

二、elementor编辑页面 元素 WordPress 产品类别样式优化css

/* =========================
   分类导航基础样式
========================= */

/* 默认分类文字：黑色 */
.cat-item > a {
    color: #1a1a1a !important;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-block;
    padding: 5px 8px;
    border-radius: 4px;
}

/* 默认圆点也改成黑色 */
.cat-item::marker {
    color: #1a1a1a;
}

/* =========================
   鼠标经过
========================= */

.cat-item > a:hover {
    color: #ff6500 !important;
    background: #fff4ec;
}

/* =========================
   当前分类
========================= */

.cat-item.current-cat > a {
    color: #ff6500 !important;
    font-weight: 600;
    background: #fff3e8;
}

/* 当前分类左侧圆点 */
.cat-item.current-cat::marker {
    color: #ff6500;
}

/* =========================
   当前分类的父级
========================= */

.cat-item.current-cat-parent > a {
    color: #ff6500 !important;
    font-weight: 600;
}

/* 父级圆点 */
.cat-item.current-cat-parent::marker {
    color: #ff6500;
}

/* =========================
   子分类
========================= */

.cat-item .children {
    margin-top: 4px;
    padding-left: 24px;
}

.cat-item .children > .cat-item > a {
    color: #333333 !important;
    font-size: 15px;
    font-weight: 400;
}

/* 子分类 hover */
.cat-item .children > .cat-item > a:hover {
    color: #ff6500 !important;
}

/* 当前子分类 */
.cat-item .children > .current-cat > a {
    color: #ff6500 !important;
    font-weight: 600;
    background: #fff3e8;
}

/* =========================
   列表间距
========================= */

.cat-item {
    margin-bottom: 3px;
    line-height: 1.45;
}