All I want is a header with 2 rows to keep using the Squarespace

I really need a way to make my header a 2 rows configuration... first row for logo, social icons, button, etc and second row for navigation... I tried a lot of code without sucess, I managed to create something close but far from perfect with the code below... but it turns to be ugly. I would really appreciate some help here otherway I would have to use another plataform for my second paid website.

example site: https://doordesignlab.com/ 

.header-nav-wrapper {
    width: 100%;
    border-top: 1px solid white;
    border-bottom: 1px solid white;

}

.header-display-desktop {
  margin-left:40px;
  margin-top: -100px;
  width: 72%
}
.header-title-logo {
  margin-top:100px;
}
/* remove price product block */
.product-price { display:none }

/* remove add to cart product block */
.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

/* remove quantity product block */
.product-quantity-input {
    display: none !important;
}

/* header button */
.primary-button-style-solid .site-wrapper .sqs-button-element--primary:hover {
  color: dodgerblue;
}

/* nav remove underline */
.header-nav-wrapper a {
   background-image: none;
}

/* mobile nav font */
.header-menu-nav-item a {
  font-size: 24px;
}

/* mobile social icons size */
.header-actions-action .icon, .header-menu-actions-action .icon {
    margin-left: 0px;
    height: 40px;
    width: 40px;
}

/* nav nowrap */
.header-nav-list {
    display: flex;
    flex-wrap: nowrap;
    margin-top:0px;
    margin-bottom: 0px;
}

/* nav remove dropdown */
.header-nav-folder-content {
    display: none !important;
}

/* nav color hover */ 
.header-nav-list a:hover {
    color:dodgerblue !important;
    transform:scale(1);
}

/* nav and social icons hover */
.header-actions .icon--fill svg:hover {
    fill:dodgerblue!important;         filter:drop-shadow(2px 2px 0px     black)
} 
.header-nav-list a:hover {
    fill:dodgerblue!important;         filter:drop-shadow(2px 2px 0px     black)
}

/* mobile header bnt */
.header-menu-cta {
  margin-top: 0px;
  margin-left:0px;
}

What is your site url?

2 hours ago, tuanphan said:

What is your site url?

https://primrose-cube-5ejs.squarespace.com/

password: anaconda

tell me your email I will invite you as a contributor.

the image below shows more or less what I want... you see the main container is divided as table below... I dont want a main container with that divs for social and button... if I could override the html code to just get rid of the left and right divs where the social and btn are and make the header 2 rows... and put the social and btn inside the div class header-title...

the second image is photoshoped of what I need.

On 5/16/2023 at 5:54 PM, loylabel said:

https://primrose-cube-5ejs.squarespace.com/

password: anaconda

tell me your email I will invite you as a contributor.

the image below shows more or less what I want... you see the main container is divided as table below... I dont want a main container with that divs for social and button... if I could override the html code to just get rid of the left and right divs where the social and btn are and make the header 2 rows... and put the social and btn inside the div class header-title...

the second image is photoshoped of what I need.

I see you changed header layout. Do you still need help?