Elementor Pro导航菜单：活跃页面字体样式修改方案求助

方法1：使用Elementor自定义CSS（推荐） #

Elementor的Nav Menu小部件会自动给当前活跃页面的菜单项添加.current-menu-item类，直接通过自定义CSS就能修改样式：

1. 在Elementor编辑器中选中目标Nav Menu小部件
2. 切换到左侧面板的「高级」标签，找到「自定义CSS」区域
3. 输入以下样式代码（根据你的需求调整属性值）：

.elementor-nav-menu .current-menu-item a {
    color: #333; /* 替换为你需要的字体颜色 */
    font-weight: bold; /* 设置字体加粗 */
    text-decoration: underline; /* 添加下划线，可根据示例调整 */
    /* 还可以添加其他样式，比如字体大小、字间距等 */
}

设置完成后更新页面，当前活跃页的菜单项就会应用你定义的样式。

方法2：通过Elementor全局站点设置修改 #

如果希望所有菜单的活跃项统一样式，可使用全局设置：

1. 打开Elementor编辑器，点击左上角的菜单图标，选择「站点设置」
2. 进入「菜单」选项，找到「菜单链接」下的「活跃状态」
3. 在该区域直接设置字体颜色、粗细、装饰线等样式，设置后所有使用全局样式的Nav Menu都会生效。

方法3：给指定菜单项添加自定义CSS类（适合固定场景） #

如果仅需针对特定菜单项设置样式（比如固定某个页面为活跃状态的样式）：

1. 进入WordPress后台「外观」>「菜单」
2. 点击页面右上角的「显示选项」，勾选「CSS类」
3. 找到目标菜单项（比如示例中的「vita」），在「CSS类（可选）」输入框中添加自定义类名，比如custom-active-item
4. 回到Elementor编辑器，选中Nav Menu小部件，在「高级」>「自定义CSS」中添加：

.elementor-nav-menu .custom-active-item a {
    /* 自定义样式代码 */
}

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