two row header conversion

Question

click here to see the design - two-row header image

I am confused to develop this type of header design, 1st row 2 elements centered logo and right side icons, second row have the menu, how can perfectly code the html and css, also how it should work in responsive menu, please help me.

https://github.com/anasrhmankk/interview-task.git

this here i added link of the conversion i done, its not proper coding, guid me thank you

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Logo Home Shop Client Diaries About us Appointment Sale search user cart 0

          </div>
        </div>
      </nav>


</header>

.navbar-brand {
    position: absolute;
    padding-top: 0 !important;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

li.nav-item.cart {
    position: relative;
}
.mini-cart-count {
    position: absolute;
    top: 0px;
    right: -15px;
    background: #ED1C2A;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
}
header .navbar-nav .nav-link {
    color: #151515;
}
.menu-bar-btm {
    margin-top: 130px;
    position: relative;
    display: inline-flex;
    width: 100%;
}
ul.navbar-nav.basket {
    position: absolute;
    right: 0;
    top: -120px;
    display: inline-block;
    width: 150px;
    flex-direction: unset;
}
ul.navbar-nav.basket li {
    float: left;
}
.menu-bar-btm ul.navbar-nav {
    margin: 0 auto;
    font-size: 17px;
    column-gap: 20px;
}

Answer 1

The layout codepen without images, paddings, etc.

<header>
  <a class='logo'>Logo here</a>
  <aside>
    <a>Search</a>
    <a>Login</a>
    <a>Cart</a>
  </aside>
  <nav>
    <a>Home</a>
    <a>...</a>
    <a>...</a>
    <a>...</a>    
  </nav>  
</header>

header{
  display: flex;
  flex-wrap: wrap;
}
header > aside{
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end;
  background: lightblue;
}
header > aside a{
  margin: 0 1em;
}
header::before{
  content: '';
  background: pink;
  flex: 1 0 0;
}

header > nav{
  flex: 1 0 100%;
  display: flex;  
  justify-content: center;
}
header > nav a{
  margin: 1em;
  padding: .2em .5em;
  background: lightgreen;  
}