时间戳

首页 > 解决方案 > 使用给定 CSS 的底部菜单在我的 WordPress 项目中不起作用

css - 使用给定 CSS 的底部菜单在我的 WordPress 项目中不起作用

问题描述

我想知道是否有人可以帮助我解决我目前遇到的问题。我正在通过 Udemy 进行 wordpress 项目，并按照说明进行操作，但我的结果无法正常工作。

在移动视图中时，底部菜单不应显示，但正如您在我的屏幕截图中看到的那样，它仍然显示： screenshot

这是我的页脚菜单的 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 上。非常感谢

标签： csswordpressmedia-queries

解决方案

如果要在移动设备中隐藏页脚菜单，则必须display: none在 768px 的媒体查询中使用该菜单 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;
    }
}

推荐阅读