如何用CSS实现Elementor粘性导航栏切换时缩小Logo尺寸？

核心思路 #

Elementor的粘性导航激活时，会给导航容器（或body标签）添加专属状态类，我们可以通过这个状态类针对性修改Logo尺寸。

步骤1：获取正确选择器 #

1. 打开浏览器开发者工具（快捷键F12），切换到「Elements」标签页
2. 查看非粘性状态下的Logo元素，复制它的容器类（比如elementor-widget-image elementor-id-123）
3. 滚动页面触发粘性导航，查看导航容器上新增的状态类（常见为elementor-sticky--active，或body上的elementor-sticky-header-active）

步骤2：编写CSS代码 #

将代码中的占位选择器替换为你实际获取到的类名即可：

/* 默认状态下的Logo尺寸 */
.your-logo-container-class img {
    height: 100px;
    width: auto;
}

/* 粘性导航激活时的Logo尺寸 */
.elementor-sticky--active .your-logo-container-class img {
    max-height: 40px;
    width: auto;
    transition: all 0.3s ease; /* 可选：添加平滑过渡动画 */
}

示例（基于实际选择器） #

如果你的Logo容器类是elementor-widget-image elementor-id-456，粘性导航类是elementor-sticky--active，最终代码如下：

/* 默认Logo尺寸 */
.elementor-widget-image.elementor-id-456 img {
    height: 100px;
    width: auto;
}

/* 粘性状态下的Logo尺寸 */
.elementor-sticky--active .elementor-widget-image.elementor-id-456 img {
    max-height: 40px;
    width: auto;
    transition: all 0.3s ease;
}

备选情况（body添加状态类） #

如果Elementor是给body标签添加粘性状态类（比如elementor-sticky-header-active），则代码调整为：

body.elementor-sticky-header-active .your-logo-container-class img {
    max-height: 40px;
    width: auto;
}

注意事项 #

• 将代码添加到WordPress后台「外观」→「自定义」→「额外CSS」中，或Elementor的页面自定义CSS面板
• 若样式未生效，可适当提升选择器优先级（比如增加父类层级），尽量避免滥用!important

内容的提问来源于stack exchange，提问作者Guru