Question

我在使菜单列表显示在响应式导航栏上时遇到问题。链接/列表项未显示。我可以在移动版上打开和关闭菜单。并且菜单列表在台式机上显示很好，但在移动版上却没有。

感谢您的帮助

    <!-- ##### Header Area Start ##### -->
    <header class="header-area">
    <!-- Top Header Area -->

    <!-- Navbar Area -->
    <div class="credit-main-menu" id="sticker">
    <div class="classy-nav-container breakpoint-off">
    <div class="container">
    <!-- Menu -->
    <nav class="classy-navbar justify-content-between" id="creditNav">

    <!-- Navbar Toggler -->
    <div class="classy-navbar-toggler">
    <span class="navbarToggler"></span>
    </div>

    <!-- Menu -->
    <div class="classy-menu">

    <!-- Close Button -->
    <div class="classycloseIcon">
    <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
    </div>
    <!-- Nav Start -->
    <div class="classynav">
                            
    <!-- Logo Area -->
    <div class="logo">
    <a href="index.html"><img src="img/core-img/logo.png" alt="" width="80px" height="63px">&nbsp;&nbsp;&nbsp;&nbsp; BRAND TITLE</a>
    </div>
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="how-it-works.html">HOW IT WORKS</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="contact.php">CONTACT US</a></li>
    </ul>
   </div>
  <!-- Nav End -->
  </nav>
  </div>
  </div>
  </div>
  </header>
  <!-- ##### Header Area End ##### -->

这是CSS代码。我已经修改了CSS文件中的许多属性，但似乎找不到如何使菜单出现在响应版本中的方法。

       

.classynav .logo {
background-color: #ffffff;
padding-right:20px; 
padding-top: 13px;
padding-bottom: 9.5px;
position: fixed;
top: 0;
left: 0;
width: 30%;
clip-path: polygon(100% 0, 100% 0, 86% 100%, 0 100%, 0 0);
}

.classynav .logo a {
color: #b00b1b;
font-size: 18px;
font-weight: 800;
}


/* Mobile/Tablet Nav CSS */
.breakpoint-on .classycloseIcon {
  display: block; }
.breakpoint-on .classy-navbar-toggler {
  display: block; }
.breakpoint-on .classy-navbar .classy-menu {
  background-color: #ffffff;
  position: fixed;
  top: 88px;
  left: -310px;
  z-index: 1000;
  width: 200px;
  height: 50%;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  padding: 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  display: block;
   overflow-x: hidden;
  overflow-y: scroll;
   }

导航栏菜单列表未显示在响应式菜单上

0 个答案: