Bootstrap expanding search bar with menu

<div class="container-fluid">
      <div class="menu-section"> 
          <div class="nav-section">
          <div class="topHeader">
              <ul>
              <li><span>24/7 Support: +91 989 9966 087</span></li>
              <li><span>Email: </span> abc@gmail.com</li>
              <li> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-linkedin"></i> </li>
          </ul>
          </div>
          <div class="nav-section">
              <nav class="navbar navbar-expand-lg border-top">
              <h1 class="logo">Logo</h1>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-icon"><i class="fa fa-bars"></i></span>
  </button>

  <div class="collapse navbar-collapse " id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Elements</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Features
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Dashboard</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pages</a>
      <li class="nav-item">
        <a class="nav-link" href="#">Portfolio</a>
      </li> 
      
       
    </ul>
      
  </div>
  
  
</nav>
             <div class="search">
                
                 <form action="">
                 <div class="searchBox">
                 <input type="text" name="" id="" class="form-control" placeholder="Search here..." >
                 <div class="close-btn">X</div>
                 <span>Search</span>
                 </div>
                 <div class="searchIcon" ><i class="fa fa-search"></i></div>
                 </form>
             </div>
              </div>
          </div>
      </div>
  </div>
  
  
  <div class="page"></div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .menu-section { display: flex; align-items: center;}
        .nav-section { width: 100%; position: relative;}
        .logo {      font-size: 35px;  color: #2196F3;}
        .topHeader { margin-bottom: 5px; }
        .topHeader ul { margin: 0; padding: 0; list-style: none; margin-bottom: }
        .topHeader ul li { display: inline-block;}
        .topHeader ul { margin: 0; padding: 0;  text-align: right;}
        .topHeader ul {  margin: 0; padding: 0; list-style: none; }
        .topHeader ul li { display: inline-block;  padding: 0px 12px; border-right: solid 1px #ccc; line-height: 1; margin: 10px 0px; font-size: 14px;}
        .topHeader ul li:last-child { border-right: none;}
        .topHeader ul li i { padding: 0px 5px;}
        .topHeader ul li a { color: #ccc;}
        .page { min-height: 500px; }
        .border-top { border-top:solid 1px #ccc; background: #fff; }
        .nav-section ul li a { font-weight: 500; color: #333; font-size: 15px;   margin: 0px 15px;}
        .searchIcon { float: right; position: absolute;  right: 15px;   width: 20px;  height: 50px; text-align: center; line-height: 40px; bottom: 5px; cursor: pointer; background: transparent; border: none;}
        .searchIcon:focus {outline: none;}
        .search {  position: relative;  }
        .searchBox { display: none;}
        .showSearchBar { display: block; margin-top: -55px; position: relative; z-index: 9;     margin-left: 125px;}
        .close-btn { text-align: right; position: absolute; top: 10px;  padding-right: 10px; font-weight: 700; color: #00aff1;  font-size: 18px;  right: 0; }
        .searchBox span { display: none;}
        span.n {  position: absolute; right: 0; bottom: 0px; background: #00c5bc; height: 45px; border: none; border-radius: 0px 4px 4px 0px;  text-align: center; line-height: 45px; color: #fff;  font-weight: 600; text-transform: uppercase; font-size: 16px; padding: 0px 15px; }
        .close-btn { cursor: pointer;}
        .showSearchBar input { min-height: 45px; }
        .dropdown-menu.show a { margin-left: 0; }
        @media(max-width:991px){
          button.navbar-toggler {  margin-right: 20px;     margin-top: 0px;  outline: transparent; }
          .search { position: initial; }
          .searchIcon { top:15px;}
          .showSearchBar { display: block; margin-top: -55px; position: absolute; z-index: 9; margin-left: 0px; width: 98%; top: 120px;  right: 0;
          }
        }
        @media(max-width:636px) {
          .topHeader { display: none;}
        }
    </style>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
    <script>
        $(document).ready(function(){
            
            $('.searchIcon').click(function(){
               $('.searchBox').addClass('showSearchBar'); 
                $('.searchBox').show('showSearchBar'); 
            });
            
             $(".searchBox input").focus(function(){
                 $('.searchBox span').addClass('n'); 
    $("span").css("display", "inline").fadeIn(2000);
  });
  $('.close-btn, .page').click(function(){
    $('.searchBox').hide();
  }); 
        })
    </script>