navbar-flex.css

*{
  margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 /* cursor: url("data:image/svg+xml,%3Csvg height='6' width='6' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' fill='%23eee' r='4'/%3E%3C/svg%3E") 3 3, auto; */
}
@font-face {
  font-family: 'DIN Pro';
  font-style: normal;
  font-weight: 400;
  src: local('DIN Pro'), url('https://fonts.cdnfonts.com/s/18678/DINPro.woff') format('woff');
}
html{
  overflow-x: hidden;
}

 body{
   background-color: rgb(219, 218, 218);
 }
/*Pendorong semua nav*/

/*Taq untuk nav atau link */
.navbar{
   margin: 100%;
   height: 15vh;
   margin:auto;
   display: flex;
   align-items:center;

   padding: 0px 10px;
}
.logo{
   width: 80px;
   cursor: pointer;
   left: 30px;
   position: absolute;
}
nav{
  /* flex:1 ; */
  /* padding-left:60px ; */
  text-align: center;
  border-radius: 3px;
  /* padding: 5px 10px; */
  flex: 1;
  font-family:'DIN Pro';
  /* justify-content:center; */
}

nav ul li {
   display: inline-block;
   list-style: none;
   margin-right:0px 25px ;
   text-align: center;
   /* padding-left:30px; */
   border-radius: 3px;
}
nav ul li a{
   text-decoration: none;
   color:rgb(0, 0, 0);
   border-radius: 3px;
   padding: 8px 10px;
   font-size: 1em;
   
   /* disini untuk site map nya */
   
}
nav ul li a:hover{
   color: rgb(0, 0, 0) ;
   border-radius: 3px;
}
a.active,a:hover{
   background: rgba(20, 82, 199, 0.705);
   transition: .5s;
}




@media only screen and (max-width:700px){
   nav ul{
       
       background:linear-gradient(rgb(71, 117, 218),#1c5ce6);
       position:absolute;
       top:100px;
        left: 0px;
        z-index: 2;
       display: block;
       width: 100%;  
    }
    /* nav itu untuk mengatur list link */
    nav ul li{
        display: block;
        margin-top: 15px;
          height: 10px;
        margin-bottom: 25px;
    }
    .menu-toggle{
        display: flex !important;
       
    }
    #menuList{
      /* jika ada problem, proble nya ada diisini  */

        overflow-x: hidden;
        display: block;
        transition: 0.4s;
    }
    button.btn-nav{
      display: none !important;
    }
}







 .menu-toggle {

	flex-direction:column;
	height:20px;
  display: none;
	position:relative;
	justify-content:space-between;

}
.menu-toggle input {
	position:absolute;
	width:40px;
	height:28px;
	top:-3px;
	opacity:0;

	cursor:pointer;
	z-index: 22;
}

/* disini tempat untuk mengatur tampilan hamburger */
 .menu-toggle span {
	display:block;
	width:28px;
	height:2.5px;
	background-color:rgb(255,255,255);
	border-radius:3px;
	position:relative;
 
	transition:all 1s cubic-bezier(0.9,-0.9, 0, 1.03);
  transition-delay: 0.3s;
	justify-content: space-between;
}

/* hamburger menu animation */
 .menu-toggle span:nth-child(2) {

	transform-origin:0 0;
	transform:rotate(360deg);
}
.menu-toggle input:checked ~ span:nth-child(2) {
	transform:rotate(45deg) translate(-1px,-1px);	background-color:rgb(0, 70, 255);
}
.menu-toggle span:nth-child(4) {

	transform-origin:0 0;
	transform:rotate(-360deg);
}
.menu-toggle input:checked ~ span:nth-child(4) {
	transform:rotate(-45deg) translate(-1px,0px);	background-color:rgb(0, 70, 255);
}
.menu-toggle input:checked ~ span:nth-child(3) {
	opacity:1;
	transform: scale(0);
}

/* button  */
button.btn-nav{
	border-radius: 20px;
	border: 1px solid transparent;
	background-color: #2b6bff;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	text-transform: uppercase;
	transition: transform 80ms ease-in;
  cursor: pointer;
  right: 30px;
  position: absolute;
  display: block;
}