Navigation Items not displaying on large screens

Question

My navigation items are not displaying on large screens, however on mobile devices they are displaying as expected. Can anyone assist me with a solution. I am suspecting that it has to do with the clip-path property, however i have tried to play around with it and haven't had any joy.I want the navigation items to display on large screens as it is displaying on mobile devices.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

.navBar {
  position: relative;
  height: 10vh;
  display: flex;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background: #003300;
}

.navbrand {
  padding: .8em 0 0 1em;
  /*    margin: 2.5em 0;*/
}

.logo {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
}

.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;
}

.navList.open {
  clip-path: circle(1000px at 90% -10%);
  -webkit-clip-path: circle(1000px at 90% -10%);
  pointer-events: all;
}

.navItem {
  text-align: center;
  padding-top: 1.2em;
}

.navLink {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.6;
}

.navLink:nth-child(1) {
  transition: all 0.5s ease 0.2s;
}

.navLink:nth-child(2) {
  transition: all 0.5s ease 0.4s;
}

.navLink:nth-child(3) {
  transition: all 0.5s ease 0.6s;
}

.navLink:nth-child(4) {
  transition: all 0.5s ease 0.6s;
}

.navLink:nth-child(5) {
  transition: all 0.5s ease 0.6s;
}

.navLink:nth-child(6) {
  transition: all 0.5s ease 0.6s;
}

.navLink.fade {
  opacity: 1;
}

.navLink:focus {
  color: #ff0000;
  opacity: .3;
}

.navLink:hover {
  color: #ff0000;
  opacity: .6;
}

.socialContact {
  display: flex;
  margin: 1em auto;
}

.socialLink {
  background: #fafafa;
  width: 40px;
  height: 40px;
  margin: 1em 0.625em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.socialFB {
  font-size: 1.5rem;
  color: #4267b2;
  padding: 1em;
}

.socialTwitter {
  font-size: 1.5rem;
  color: #1da1f2;
  padding: 1em;
}

.socialInsta {
  font-size: 1.5rem;
  color: #000;
  padding: 1em;
}

.hamburger-btn {
  position: absolute;
  cursor: pointer;
  right: 5%;
  top: 50%;
  transform: translate(-5%, -50%);
  z-index: 2;
}

.hamburger-btn_burger {
  width: 20px;
  height: 3px;
  background: #fff;
  margin: 5px;
  transition: all .5s ease-in-out;
}

.hamburger-btn_burger::before,
.hamburger-btn_burger::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 3px;
  background: #fff;
  border-radius: 5px;
  transition: all .5s ease-in-out;
}

.hamburger-btn_burger::before {
  transform: translateY(-7px);
}

.hamburger-btn_burger::after {
  transform: translateY(7px);
}

.hamburger-btn.open .hamburger-btn_burger {
  transform: translateX(-50px);
  background: transparent;
}

.hamburger-btn.open .hamburger-btn_burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}

.hamburger-btn.open .hamburger-btn_burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

@media screen and (min-width: 768px) {
  .navBar {
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
  .navList {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .navItem {
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 2em;
  }
  .navLink {
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 0 70px 0 0;
    text-align: left;
    border-bottom-style: none;
    padding: 0;
  }
  .navbrand {
    margin-bottom: 1em;
  }
  .logo {
    margin-top: 0;
  }
  .hamburger-btn {
    display: none;
  }
  .socialContact {
    display: none;
  }
  .logo:focus {
    color: #ff0000;
    opacity: .1;
  }
  .logo:hover {
    color: #ff0000;
  }
}

<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

You are correct clip-path is on of the issues. But background is also an issue as its overlapping the existing content when clip-path is removed

I was able to see your "navlist" items using below css. Commented 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; */
}

Although, I'm not able to see the Navbar in mobile mode also, when I use dev-tools.

Answer 2

it won't display on the large screens as per "bootstrap" for making the nav-bar not displayed with using display:none css class in the large screen.

so i will recommend for you to not use nav-bar from bootstrap and you can easily do it with html - css.

Answer 3

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

Can you please look at this code...