Html 移动视图上的按钮未替换为备选按钮

我想让桌面按钮在web视图中消失

下面的第一张图片是网站的全视图，以及图片按钮的大小。

移动视图上的第一个按钮没有消失

#menu-item-242{
      background-color:#e74c3c;
      padding: 2px 5px 0px 30px;
      border:none;
      border-radius:2px;
      color:white;
      text-decoration: none;
}

HTML

<div class="wrap">
<ul id="menu-secondary-items" class="menu-items">
<li id="menu-item-242" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-242"><a href="#">Business</a></li>
</ul></div>

---

您显示的代码似乎与按钮无关。@isherwood：不太熟悉媒体查询，但我更新了代码。请参阅您的媒体查询没有指向移动设备。@Andy我正在使用此主题，请参阅我的WordPress主题上的两个css文件。一个是正确缩进的，另一个不是作者写的。上面的id和类名在实际的css中使用。和希望得到您的考虑。谢谢这可能对你有帮助

@media only screen and (min-width:800px) {
    .menu > .wrap {
        display: block!important;
    }

    .menu- toggle {
        display: none;
    }

    .menu ul {
        list-style: none;
        margin: 0;
    }

    .menu-items {
        zoom: 1;
    }

        .menu-items::before, .menu-items::after {
            content: "";
            display: table;
        }

        .menu-items::after {
            clear: both;
        }

        .menu-items > ul {
            width: 100%;
            margin: 60px auto;
        }

        .menu-items li li a {
            -webkit-transition: all 0 ease 0;
            -moz-transition: all 0 ease 0;
            -o-transition: all 0 ease 0;
            transition: all 0 ease 0;
        }

        .menu-items li:hover > ul, #menu-secondary .menu-items li:hover > ul {
            margin: 0;
        }
}