Question

我正在使用基础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 %}
...

当我将屏幕调整到手机大小o 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不是图片经过调整大小而不是整个菜单栏的大小

感谢!!!

Answer 1

<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>

，它会水平放置3个短划线

意外行为显示：阻止;

1 个答案: