底部菜单无法在我的WordPress项目中使用给定的CSS

Question

我想知道是否有人能帮我解决我目前遇到的问题。我正在通过Udemy进行一个wordpress项目，并遵循说明，但我的结果不正确。

底部菜单在手机视图中不应该显示，但正如你在我的屏幕截图中看到的，它仍然显示：屏幕截图

这是页脚菜单的CSS代码：

/页脚/

.site-footer{
border-top: 2px solid var(--lightGray);
padding:2rem 0;
}
.footer-content{
display: flex;
justify-content: space-between;
}
.footer-menu{
display: none;
}
@media (min-width: 768px){
.footer-menu .menu{
display: flex;
}
.footer-menu .menu li{
margin-right: 2rem;
}
.footer-menu .menu li:last-of-type{
margin-right: 0;
}

.footer-menu a{
font-family: var(--mainFont);
font-size: 1.8rem;
color: var(--black);
}
}

**更新**到目前为止，我似乎在这方面运气不佳-我希望有人和我一起测试代码，找出问题所在。如果有人愿意帮忙，我已经把它放在github上了。非常感谢

Answer 1

如果你想在移动设备中隐藏页脚菜单，那么你必须在768px的媒体查询中display: none该菜单div。

@media(max-width:768px){
.footer-menu{display: none;}
}

因此，首先，菜单将显示在桌面上，您不需要先添加display: none。您可以将其添加到@media查询中。

从桌面上删除以下CSS：

.footer-menu{
display: none;
}

并在我上面提到的媒体查询中添加这个。

@media(max-width:768px){
.footer-menu .menu{
display: none;
}
}

Answer 2

如果没有看到我们的html，我无法确定问题出在哪里。我的建议是

1. 检查您的html是否应用了正确的类。

2. 如果不是这样，请确保您正在加载最新的css文件*，并且它没有从缓存中加载旧版本**。

*在进行开发时，当查询css时，您可以通过在functions.php文件中添加修改后的时间作为版本参数来强制wordpress加载最新的css文件：

$modified = filemtime( get_template_directory() . '/style.css');
wp_enqueue_style( 'SLUG-style', get_stylesheet_uri(), array(), $modified );

**在chrome中，您可以使用开发工具清除缓存(ctrl+shift+i(，右键单击刷新，然后单击"清空缓存并硬重新加载"。