Question

我正在使用基础工作在我的网站的顶部栏上，一切似乎工作正常，除了菜单图标没有出现，我跟着基础文档，我仍然有问题。我看起来像这样：

<header class="contain-to-grid">
<!-- Starting the Top-Bar -->
<nav class="top-bar" data-topbar>
        <ul class="title-area">
          <li class="name"/>

           <!-- 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>Menu</span></a></li>
        </ul>


    <section class="top-bar-section">

            <ul class="left">
                    <li class="divider"></li>
                <li >
                    <a href="#">page1</a>
                </li>
                    <li class="divider"></li>
                <li>
                    <a href="#">page2</a>
                </li>
                    <li class="divider"></li>
                <li >
                     <a href="#">page3</a>
                </li> 
                <li class="divider"></li>
            </ul>


            <!--Search in top bar-->
            <ul class="right">
                <li class="has-form">
                    <div class="row collapse">
                        <div>
                            <div class="large-8 small-8 columns">
                                <input type="text" placeholder="">
                            </div>
                            <div class="large-4 small-4 columns">
                                  <a href="#" class="button expand">Search</a>
                            </div>
                        </div>
                    </div>
            </ul>

    </section>

</nav>

<!-- End of Top-Bar -->
</header>

“菜单”确实出现并且正常工作，但菜单图标永远不会。如果我删除“菜单”，则不显示任何内容，我根本无法使用该菜单。

Answer 1

我想我知道解决方案。您必须从Foundation导入CSS，如下所示：

<link rel="stylesheet" type="text/css" href="css/foundation.min.css">

基金会使用媒体查询。这意味着您必须将浏览器窗口当前大小调整为40.063em。

菜单＆＃34;汉堡＆＃34;图标不会出现，但会出现文字

1 个答案: