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菜单栏时，它会固定在顶部，导航第一行隐藏。