大屏幕上不显示导航项

Question

我的导航项未显示在大屏幕上，但在移动设备上却按预期显示。任何人都可以帮助我解决问题。我怀疑它与 clip-path 属性有关，但是我尝试使用它但没有任何乐趣。我希望导航项显示在大屏幕上，就像它在移动设备上显示的那样。

<nav class="navBar">

  <div class="navbrand">

    <a href="#" class="logo">XandY Junior School</a>

  </div>

  <div class="hamburger-btn">

    <div class="hamburger-btn_burger"></div>

  </div>

  <ul class="navList">

    <li class="navItem">

      <a href="#" class="navLink"></a>

    </li>

    <li class="navItem">

      <a href="story.html" class="navLink">Our Story</a>

    </li>

    <li class="navItem">

      <a href="#" class="navLink">Sports & Clubs</a>

    </li>

    <li class="navItem">

      <a href="#" class="navLink">Admissions</a>

    </li>

    <li class="navItem">

      <a href="#" class="navLink">Parents</a>

    </li>

    <li class="navItem">

      <a href="#" class="navLink">BOSA</a>

    </li>

    <li class="navItem">

      <a href="#" class="navLink">Contact Us</a>

    </li>

    <li class="socialContact">

      <a href="#" class="socialLink"><i class="fab fa-facebook-f socialFB"></i></a>

      <a href="#" class="socialLink"><i class="fab fa-twitter socialTwitter"></i></a>

      <a href="#" class="socialLink"><i class="fab fa-instagram socialInsta"></i></a>

    </li>

  </ul>

</nav>

Answer 1

它不会按照“bootstrap”在大屏幕上显示，因为在大屏幕上使用 display:none css class 不显示导航栏。所以我会建议你不要使用 bootstrap 的导航栏，你可以使用 html - css 轻松地做到这一点。

Answer 2

$(document).ready(function(){$(".hamburger-btn").click(function(){&nbsp; $(".navList").toggle();});});body{margin: 0;padding: 0;}.navbrand {display: block;background: darkgreen;padding: 10px;}.logo {padding: 10px;color: #fff;text-decoration: none;}.hamburger-btn {position: absolute;top: -50px;right: -3px;background: darkgreen;width: 150px;height: 150px;border-radius: 150px;}.hamburger-btn_burger {width: 30px;height: 4px;background: #fff;display: block;position: absolute;bottom: 77px;right: 60px;}.hamburger-btn_burger::before{position: absolute;content: "";width: 30px;height: 4px;background: #fff;top: -8px;z-index: 9;}.hamburger-btn_burger::after{position: absolute;content: "";width: 30px;height: 4px;background: #fff;bottom: -8px;z-index: 9;}.navList{display: none;background: darkgreen;padding: 15px;position: absolute;top: 22px;width: 100%;z-index: 1;}.navList li{list-style: none;display: block;}.navList li a{display: block; color: #fff; text-decoration: none; padding: 10px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><nav class="navBar">&nbsp; <div class="navbrand">&nbsp; &nbsp; <a href="#" class="logo">XandY Junior School</a>&nbsp; </div>&nbsp; <div class="hamburger-btn">&nbsp; &nbsp; <div class="hamburger-btn_burger"></div>&nbsp; </div>&nbsp; <ul class="navList">&nbsp; &nbsp; <li class="navItem">&nbsp; &nbsp; &nbsp; <a href="#" class="navLink">About Us</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="navItem">&nbsp; &nbsp; &nbsp; <a href="story.html" class="navLink">Our Story</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="navItem">&nbsp; &nbsp; &nbsp; <a href="#" class="navLink">Sports & Clubs</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="navItem">&nbsp; &nbsp; &nbsp; <a href="#" class="navLink">Admissions</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="navItem">&nbsp; &nbsp; &nbsp; <a href="#" class="navLink">Parents</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="navItem">&nbsp; &nbsp; &nbsp; <a href="#" class="navLink">BOSA</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="navItem">&nbsp; &nbsp; &nbsp; <a href="#" class="navLink">Contact Us</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li class="socialContact">&nbsp; &nbsp; &nbsp; <a href="#" class="socialLink"><i class="fab fa-facebook-f socialFB"></i></a>&nbsp; &nbsp; &nbsp; <a href="#" class="socialLink"><i class="fab fa-twitter socialTwitter"></i></a>&nbsp; &nbsp; &nbsp; <a href="#" class="socialLink"><i class="fab fa-instagram socialInsta"></i></a>&nbsp; &nbsp; </li>&nbsp; </ul></nav>你能看看这段代码吗...

Answer 3

你是正确的剪辑路径是一个问题。但背景也是一个问题，因为当删除剪辑路径时它与现有内容重叠我能够使用下面的 css 看到您的“navlist”项目。评论了background, clip-path & Padding.navList {&nbsp; position: absolute;&nbsp; /* background: #003300; */&nbsp; height: 100vh;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; /* clip-path: circle(100px at 90% -10%); */&nbsp; /* -webkit-clip-path: circle(100px at 90% -10%); */&nbsp; transition: all 1s ease-out;&nbsp; pointer-events: none;&nbsp; /* padding-top: 9em; */}虽然，当我使用开发工具时，我也无法在移动模式下看到导航栏。