[英]Unexpected behaviour display: block;
I am using foundation 5 我正在使用粉底5
layout.html.twig: 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 %}
...
what happens is that when I resize the screen to the phone size o meno disappears, I realized that this is because the <a class="right-off-canvas-toggle" href="#">
has a display: block
, has a solution that would use something in css: 发生的是,当我将屏幕大小调整为手机大小时,菜单消失了,我意识到这是因为
<a class="right-off-canvas-toggle" href="#">
具有display: block
,具有一个在css中使用某些东西的解决方案:
@media (max-width: 40em) {
.top-bar-section ul li > a {
display: none;
}
}
But if possible would like another solution, because for this visual effect: 但是,如果可能的话,还需要另一种解决方案,因为对于这种视觉效果:
.top-bar-section-layout li a:not(.button):hover {
background-image: url('../images/laranja_active_top_full.png') !important;
}
accurate display: block
is not the image undergoes resizing and is not the size of the whole menu bar 准确
display: block
不是图像经过调整大小,也不是整个菜单栏的大小
thanks!!! 谢谢!!!
<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>
I ended up giving up on solving keep the buttons on the responsive menu. 我最终放弃了解决方案,将按钮保留在响应菜单上。 Now when the screen is the tamnho phone it puts the 3 dash horizontally, thanks to the passage
<li class="toggle-topbar menu-icon"> <a href="#"> <span> </span> </a> </li>
现在,当屏幕是tamnho手机时,由于段落
<li class="toggle-topbar menu-icon"> <a href="#"> <span> </span> </a> </li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.