Navbar内容未在调整大小时隐藏

Question

我有一个“导航栏”，当窗口宽度大于730px

时会隐藏

**

的NavBar

**

#topBar {
    height: 60px;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(233, 239, 249, 0.8);
    padding-top: 20px;
    transition: 0.5s;
    text-align: center;
}

**

在调整大小

**

@media only screen and (min-width: 730px) {
    #topBar {
            padding: 0;
            height: 0;
            }
}

问题是div内部的内容（#topBar）没有隐藏它，现在我的解决方案是在潜水时使用display：none来包装Navbar的内容，但我想知道是否有一个更清洁的解决方案。谢谢！

**

HTML

**

<div id="topBar">
    <div class="contentTopBar">
        <h1>{{actName}}</h1>
        <button class="Hecho" data-dismiss="modal" ng-click="saveGame()">{{modalButton}}<img src="/modulos/icons/check.png" class="startIcon"></button>
        <button class="Tienda" data-dismiss="modal" ng-click="goStore()">Ir a la Tienda<img src="/modulos/icons/Store.png" class="storeIcon"></button>
    </div>
</div>

**

内容导航栏

**

@media only screen and (min-width: 730px) {
   .contentTopBar{
        display: none;
    }
}

Answer 1

您可以通过在媒体查询中添加visibility: hidden;来完成此操作。这将隐藏导航栏内的所有内容。

这是一个有效的例子：

@media only screen and (min-width: 730px) {
    #topBar {
            padding: 0;
            height: 0;
            visibility: hidden;
            }
}

#topBar {
    height: 60px;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(233, 239, 249, 0.8);
    padding-top: 20px;
    transition: 0.5s;
    text-align: center;
}

<div id="topBar">
    <div class="contentTopBar">
        <h1>{{actName}}</h1>
        <button class="Hecho" data-dismiss="modal" ng-click="saveGame()">{{modalButton}}<img src="/modulos/icons/check.png" class="startIcon"></button>
        <button class="Tienda" data-dismiss="modal" ng-click="goStore()">Ir a la Tienda<img src="/modulos/icons/Store.png" class="storeIcon"></button>
    </div>
</div>