Header items overlapping when window is minimized

Site URL: https://boldhumansco.com/

Hi! I have a few items in the header: search bar, login, and shopping cart. It looks fine when in full screen, but it overlaps when the window is minimized. I've attached screenshots of full screen and minimized. I've also attached the Custom CSS code for the search bar, which is what is messing everything up. All help is appreciated, thanks so much!

// SEARCH BAR
	// design search bar
  .header-search-bar{
    margin: 0 0 10 10vw;
  }
 @media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width:  799px ){
    .header-search-bar{
      display:none;
      margin: 0 0 10 10vw;
    }
  }
  .header-search-bar  .search-input{
    border: 1px solid currentColor !important;
  }
  .header-search-bar  .search-input::placeholder{
    color: currentColor !important;
  }
  .mobile-header-search-bar{
    background-color: transparent;
    display:block;
    padding-left:3vw;
    padding-right:3vw;
  }
  .mobile-header-search-bar .preFade, .mobile-header-search-bar .preScale,.mobile-header-search-bar .preSlide,.mobile-header-search-bar .preClip, .header-search-bar .preFade, .header-search-bar .preScale, .header-search-bar .preSlide, .header-search-bar .preClip{
    opacity:1 !important;  
    transform: scale(0.9) translate(190%,0%) !important;
  }

	// reduce height
.sqs-search-ui-button-wrapper .search-input { 
  padding-top: 3px;
  padding-bottom: 3px;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

	// remove the highlight box on focus
.sqs-search-ui-button-wrapper .search-input.hover-effect:hover, .sqs-search-ui-button-wrapper .search-input.hover-effect:focus{
  outline: none !important;
}

	// dark icon
.header-search-bar .search-input{
  background: url(/universal/images-v6/icons/icon-searchqueries-20-dark.png) no-repeat 13px 50% !important;
}

Website: https://boldhumansco.com/

Password: baldisbold

Hi. Have you solved this yet?

11 hours ago, tuanphan said:

Hi. Have you solved this yet?

Not yet!

On 3/24/2021 at 8:06 AM, boldhumansco said:

Not yet!

Add to Design > Custom CSS

/* overlap header */
@media screen and (max-width:1100px) and (min-width:768px) {
header#header .search-block>div {
    transform: translate(0%) !important;
}
}

Screen Recording 2021-03-26 at 5.02.38 PM.mov

On 3/25/2021 at 3:48 AM, tuanphan said:

Add to Design > Custom CSS

/* overlap header */
@media screen and (max-width:1100px) and (min-width:768px) {
header#header .search-block>div {
    transform: translate(0%) !important;
}
}

 

Now it looks like this. I've attached a screen recording of what it looks like now. I want the search bar, account button, and cart button all to be directly next to each other.

On 3/27/2021 at 3:58 AM, boldhumansco said:

Screen Recording 2021-03-26 at 5.02.38 PM.mov 41.83 MB · 1 download

Now it looks like this. I've attached a screen recording of what it looks like now. I want the search bar, account button, and cart button all to be directly next to each other.

 

Hi. Can you upload video to Youtube/Google? We can see it online easier.

On 3/30/2021 at 4:27 AM, tuanphan said:

Hi. Can you upload video to Youtube/Google? We can see it online easier.

Here, thanks!

https://youtu.be/tp2KqF_wJeA

On 3/30/2021 at 4:27 AM, tuanphan said:

Hi. Can you upload video to Youtube/Google? We can see it online easier.

Hi, are you able to figure out what the problem is? Thanks!