导航栏上的文本具体化

问题描述

在我的一个使用物化的网站上,我设置了两个导航栏。一个在顶部,另一个在下面:

Navbar conception

我的代码是来自Materialize的简单设置:

{#First Navbar#}
<nav class="nav-extended white ">
    <div class="nav-wrapper ">
        <a href="#" class="brand-logo"><img src="https://via.placeholder.com/100x60.png" alt="logo Spie"></a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="black-text material-icons">menu</i></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down black-text">
            <li>
                <div class="center row ">
                    <div class="col s12 ">
                        <div class="row" id="topbarsearch">
                            <div class="input-field col s6 s12 black-text">
                                <i class="black-text material-icons prefix">search</i>
                                <input type="text" placeholder="search" id="autocomplete-input"
                                       class="autocomplete black-text">
                            </div>
                        </div>
                    </div>
                </div>
            </li>

            <li><a class="black-text" href="{{ path('client.panier.view') }}"><i class="material-icons right">shopping_cart</i>Mon
                    Panier</a></li>
            <li><a class="black-text dropdown-trigger" href="#!" data-target="dropdown1">Mon compte<i
                            class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
    </div>
{#    Second Navbar#}
    <div class="show-on-large show-on-extra-large">
        <nav>
            <div class="nav-wrapper white show-on-large">

                <ul class="left hide-on-med-and-down">
                    {% for categorie in  categories.categories %}
                        <li class="tab">
                            <a class="black-text"
                                           href="{{ path('client.constructeurs.view',{CategorieParentId: categorie.id }) }}">{{ categorie.categorieIntitule }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </nav>
    </div>
</nav>

这个想法是在我的第二个导航栏上将其隐藏在中小型屏幕上的。 但是当我在iPad Pro屏幕分辨率(1366 * 1024)上尝试网站时 出现导航栏,但文字设置不正确

Second navbar on mobile text out of navbar

你知道为什么吗? 谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)