Question

我在使粘性导航功能正常工作时遇到问题：（

我希望我的导航栏有/做的是左侧有“菜单”功能和标签，右侧有一个“电话图标”图标，可以让某人直接打电话给我。

导航正在做的另一件我能理解的事情是隐藏在页面上的第一张图片后面。

如果有人能提供帮助，我们将不胜感激。

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ABC</title>


    <link rel="stylesheet" href="css/foundation.css">
    <script src="js/vendor/custom.modernizr.js"></script>
    <!-- Included JS Files -->
    <script src="js/foundation/foundation.topbar.js"></script>

    </head>
    <body>
    <!-- START Navigation -->
    <div class="contain-to-grid sticky"> 
    <nav class="top-bar">
    <ul class="title-area">
    <!-- Title Area -->
    <li class="name"></li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li>
    <li></li>
    <li class="toggle-topbar call-icon"><a href="tel:1234567"><img src="img/75-phone.png" width="20" height="20"></a></li>

    <!-- Right Nav Section -->
    <ul class="right">
    <li class="divider"></li>
    <li><a href="#">About</a></li>
    <li class="divider"></li>
    <li class="has-dropdown"> <a href="#">Services</a>
    <ul class="dropdown">
      <li class="divider"><a href="#">1</a></li>
      <li class="divider"><a href="#">2</a></li>
      <li class="divider"><a href="#">3</a></li>
      <li class="divider"><a href="#">4</a></li>
      <li class="divider"><a href="#">5</a></li>
      <li class="divider"><a href="#">6</a></li>
      <li class="divider"><a href="#">7</a></li>
    </ul>
    </li>
    <li class="divider"></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </section>
    </nav>
    </div>

    <!-- END Navigation -->

    <!-- START Mobile logo -->
    <div class="row">
    <div class=" small-12 large-12 columns"><img src="img/landing-page-tiles-logo.jpg"><center><h2></h2></center>
    <hr />
    </div>
    </div>
    <!-- END Mobile Logo -->

    <!-- END main content -->

    <script>  document.write('<script src=' +  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +  '.js><\/script>')  </script>

    <script src="js/foundation.min.js"></script>


    <script>$(document).foundation();  </script> 
    </body>
    </html>

Answer 1

如果连续显示这两段代码，则您的右导航部分位于<ul class="title-area">标记内。关闭此列表以允许您的<ul class="right">列表以常规位置显示。

基金会zurb导航栏

1 个答案: