大屏幕上不显示导航项

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(){

  $(".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">

  <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">About Us</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 3

你是正确的剪辑路径是一个问题。但背景也是一个问题，因为当删除剪辑路径时它与现有内容重叠

我能够使用下面的 css 看到您的“navlist”项目。评论了background, clip-path & Padding

.navList {

  position: absolute;

  /* background: #003300; */

  height: 100vh;

  width: 100%;

  display: flex;

  flex-direction: column;

  /* clip-path: circle(100px at 90% -10%); */

  /* -webkit-clip-path: circle(100px at 90% -10%); */

  transition: all 1s ease-out;

  pointer-events: none;

  /* padding-top: 9em; */

}

虽然，当我使用开发工具时，我也无法在移动模式下看到导航栏。