ساخت نویگیشن بار

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!------------css_icon------------>  
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-------------------------------->  
<title>navbar</title>
<style>
@media(max-width: 992px )
  {
    .navtop2 > *
      {
        display: none;
      }
  }

body{
  height: 5000px;
  margin: 0;
  padding: 0;
  background: #262f36;}
  
.navtop1{ 
  position: sticky;
  height: 50px;
  top: 0;
  background: #262f36;
  border-bottom:1px solid #aaabb8;}

.navtop2{ 
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  align-content: center;
  text-align: center;
  background: #12171b;}

.logo{
  float: left;
  padding: 9px 5px;
  margin: 5px;
  color: #00ff0d;
  border-radius: 50px;}

.Contact-us{
  float: right;
  margin: 10px;}    

.Contact-us .icon{ 
  text-decoration: none;
  margin: 5px;
  color: #fdf6f6;}

#navbottom{
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  height: 70px;
  width: 100%;
  bottom: 0;
  background: #262f36;
  outline: 4px solid #00ff0d;
  box-shadow: inset 0 0 10px #1f262c;}

#navbottom .icon{
  display: flex;
  flex-direction: column;  
  justify-content: end;
  box-sizing: border-box;
  font-size: x-large;
  text-decoration: none;
  width: 100%;
  height: 80%;
  border-radius: 10px;
  color: #aaabb8;}

#navbottom .text{
  font-size: xx-small;
  margin-bottom: 5px;}

#navbottom .icon:focus{
  height: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 0 8px #0e1214;
  border: 3px solid #272f36;
  background-color: #262f36; text-shadow: 0px 0px 10px white;
  color: white;}


/*+++++++++++___for_desktop___++++++++++++++++*/
@media (min-width: 992px)
{
  body
    {
      height: 100vh;
    }

  #navbottom
    {
      display: none;
    }

  .navtop1
    {
      position: relative;
      float: right;
      height:13vh;
      width: 100%;
      padding: 0;
      margin: 0;
      margin-top: 0%;
      box-sizing: border-box;
      border-bottom: none;
      background: #12171b;
      border-bottom: 2px inset solid #00e70c;
    }

  .navtop2
    {
      z-index: 2;
      position: absolute;
      right: 0;
      height: 8.5vh;
      width: 90vw;
      margin: 0;
      padding: 0;
      margin-top: 4.5vh;
      box-sizing: border-box;
      background: #0c0c0c;
    }

  .navtop1 .icon
    {
      font-size: 1vw;
      margin-right: 50px;
      color: #00ff0d;
    }

  .navtop1 .Contact-us
    {
      margin-top: 0.5vh;
    }

  .logo
    {
      z-index: 999;
      position: absolute;
      align-content: center;
      text-align: center;
      height: 4vw;
      width: 4vw;
      font-size: 2vw;
      background: none;
      color: #00ff0d;
      text-shadow: 0px 0px 5px #00ff0d;
    }

  .navtop2>:nth-child(2)
    {
      z-index: 2;
      position: absolute;
      left: calc(-4vw + -2px);
      top: 0;
      width: 6vw;
      height: 100%;
      margin: 0;
      transform: skewX(-20deg);
      box-sizing: border-box;
      border-top-left-radius: 20px ;
      border-right: 2px solid black;
      box-shadow: 2px 0 0px #00ff0d;
      background: #00ff0d;
    }

  .navtop2>:nth-child(3)
    {
      z-index: 2;
      position: absolute;
      top: 0;
      left: -10vw;
      width: 6vw;
      height: 100%;
      margin: 0;
      transform: skewX(-20deg);
      box-sizing: border-box;
      border-bottom-right-radius: 20px ;
      background: #12171b;  
    }

  .navtop2>:nth-child(4)
    {
      z-index: 1;
      position: absolute;
      bottom: 0;
      left: -10vw;
      width: 6vw;
      height: 30%;
      margin: 0;
      box-sizing: border-box;
      background: #00ff0d;
    }

  .navtop2 a  
    {
      float: right;
      margin: 0;
      margin-right: 30px;
      font-size: 6vh;
      vertical-align: middle;
      text-decoration: none;
      border-radius: 50%;
      box-sizing: border-box;
      color: #fdf6f6;
    }

  input[type="text"]
    {
      position: absolute;
      right: 47%;
      height: 50%;
      width: 15%;
      margin-top:4px ; 
      border-radius: 20px;
    }
}
</style>  
</head>
<body>
  <!-----------NAVTOP_1_------------>
  <section class="navtop1">
    <div class="logo">logo</div>
    <div class="Contact-us">
      <a href="#" class="fab fa-instagram icon">     </a>
      <a href="#" class="fab fa-telegram-plane icon"></a>
      <a href="#" class="fab fa-whatsapp icon">      </a>
      <a href="#" class="fas fa-phone icon">         </a>
      <a href="#" class="fas fa-envelope icon">      </a>
    </div>
  </section>
  <!-----------NAVTOP_2_------------>
  <section class="navtop2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <a href="#" class="fas fa-user icon">           </a>
    <a href="#" class="fas fa-shopping-cart icon">  </a>
    <a href="#" class="fas fa-list icon">           </a>
    <input type="text" placeholder="search...">
  </section>
  <!-----------NAVTOP_3_------------>
  <section class="navtop3"></section>
  <!-----------NAVbottom------------>
  <section id="navbottom">
    <a href="#" class="fas fa-user icon">          <P class="text">profile      </P>   </a>
    <a href="#" class="fas fa-shopping-cart icon"> <p class="text">shopping cart</p>   </a>
    <a href="#" class="fas fa-search icon">        <p class="text">search       </p>   </a>
    <a href="#" class="fas fa-list icon">          <p class="text">Category     </p>   </a>
    <a href="#" class="fas fa-home icon">          <p class="text">home         </p>   </a>
  </section>
</body>
</html>