Click here to view the design - two-row header image
I'm struggling with creating a header design that consists of two rows - the first row includes a centered logo and icons on the right side, while the second row contains the menu. Can someone guide me on how to code the HTML and CSS for this design, especially making it responsive? Any help would be appreciated.
Link to my conversion attempt is here. It's not coded properly, please provide guidance. Thank you.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313c3c27202721322313677d637d63">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</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;
}