我使用的是foundation 5
layout.html.twig:
...
{% block top %}
<div class="row" style="max-width: none !important;">
<nav class="top-bar">
<a href="#" style="margin-left: 40px">
{% image 'bundles/delivveweb/images/Logo_Delivve.png' %}
<img src="{{ asset_url }}">
{% endimage %}
</a>
<section class="right top-bar-section top-bar-section-layout">
<!-- Right Nav Section -->
<ul>
<li><a class="right-off-canvas-toggle" href="#">NOTIFICAÇÕES</a></li>
<li><a class="right-off-canvas-toggle" href="#">PERFIL</a></li>
</ul>
</section>
</nav>
</div>
<aside class="right-off-canvas-menu box-shadow">
<ul class="off-canvas-list">
<li><label>PERFIL</label></li>
<li><a href="#">EDITAR PERFIL</a></li>
<li><a href="#">ALTERAR SENHA</a></li>
<li><a href="#">LOGOFF</a></li>
</ul>
</aside>
{% endblock %}
...
结果是，当我将屏幕调整为手机大小时，meno消失了，我意识到这是因为<a class="right-off-canvas-toggle" href="#">有一个display: block，有一个使用css中的东西的解决方案：
@media (max-width: 40em) {
.top-bar-section ul li > a {
display: none;
}
}
但如果可能的话，我想要另一种解决方案，因为对于这种视觉效果：
.top-bar-section-layout li a:not(.button):hover {
background-image: url('../images/laranja_active_top_full.png') !important;
}
准确的display: block不是图像经过调整大小，也不是整个菜单栏的大小
谢谢！！！
<nav class="top-bar top-bar-layout" data-topbar role="navigation">
<ul class="title-area">
<a href="{{ path('default_target') }}" style="margin-left: 40px">
{% image 'bundles/delivveweb/images/Delivve_logo.png' %}
<img src="{{ asset_url }}" style=" margin-top: 5px; height: 45px">
{% endimage %}
</a>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section top-bar-section-layout">
<!-- Right Nav Section -->
<ul class="right">
<li>
<a id="view_central" href="{{ path('notifications') }}#home">
{% image 'bundles/delivveweb/images/icon_central.png' %}
<img id="central" src="{{ asset_url }}">
{% endimage %}
</a>
</li>
<li class="has-dropdown">
<a id="view_notification">
{% image 'bundles/delivveweb/images/icon_alerta.png' %}
<img id="alert_notification" src="{{ asset_url }}">
{% endimage %}
</a>
<ul class="dropdown scroll-menu">
{% include 'DelivveWebBundle:Notification:show_all.html.twig' with {'notifications': notifications, 'field': "li"} %}
</ul>
</li>
<li class="has-dropdown">
<a class="right-off-canvas-toggle" href="{{ path('edit_user', {'realname': owner.realname} ) }}">
<img src="{{ asset(owner.getPictureWeb()) }}" class="img-perfil-mini active-img">
<img src="{{ asset(owner.getPictureUrl()) }}" class="img-perfil-mini hidden-img">
{% image 'bundles/delivveweb/images/icon_perfil.png' %}
<img src="{{ asset_url }}" class="img-perfil-mini hidden-img"/>
{% endimage %}
</a>
<ul class="dropdown scroll-menu">
<li><a href="{{ logout_path('web') }}">LOGOFF</a></li>
</ul>
</li>
</ul>
</section>
</nav>
我最终放弃了解决问题——保持响应菜单上的按钮。现在，当屏幕是tamnho手机时，由于<li class="toggle-topbar menu-icon"> <a href="#"> <span> </span> </a> </li>