Jump to content

Header items overlapping when window is minimized

Recommended Posts

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

Screen Shot 2021-03-14 at 6.15.20 PM.png

Screen Shot 2021-03-14 at 6.15.08 PM.png

Link to comment
  • 2 weeks later...
  • Replies 7
  • Views 703
  • Created
  • Last Reply
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

 

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.