Bug with search bar after position adjustment

Kuelah
Excursionist
25 0 6

Hi all,

 

I am facing a problem with the search bar on my desktop website, and I hope someone can help me troubleshoot it.

 

After I positioned the search icon further to the right, the search bar now looks weird:

Kuelah_0-1697384694274.png

 

Here is the code I used. I placed it into the base.css:

@media screen and (min-width: 768px) {
.header__icons {
  position: absolute;
  right: 50px;
  }
}

 

The error occurred exactly after this adjustment. Everything worked fine before, but now the search bar display is distorted.

 

Do any of you have any idea how I can fix this problem? Are there any specific CSS properties that I should check? I appreciate any help and advice to make the search bar look normal again.

 

Thanks in advance for your support!

Replies 5 (5)
PageFly-Oliver
Navigator
503 98 90

Hi @Kuelah ,

 

I checked your page and I saw If I remove this code then the search bar work fine

@media screen and (min-width: 768px) {
.header__icons {
  position: absolute;
  right: 50px;
  }
}

I think you can try to remove it

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Kuelah
Excursionist
25 0 6

Hello Oliver,

 

thank you very much for the answer.

 

I placed the code on purpose . Because I want the icons to be positioned 50px from the right side of the web page.

How do I get this to work without then having this problem with the search function?

PageFly-Oliver
Navigator
503 98 90

Hi, I think you can use the code

@media screen and (min-width: 768px) {
.header__icons {
  width:calc(100vw - 50px);
margin-left:0
}
}

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ParkdaleDigital
Shopify Partner
17 0 4

Hey!

 

Its hard to know with out knowing how the searchbar HTML is structured. My guess would be is the icon and the expanded search area are in the same div and moving that brought it out of alignment. Does removing your code returns it to normal?

Kuelah
Excursionist
25 0 6

Hey @ParkdaleDigital 

 

Yes it returns in to normal, but I want the icons to be positioned 50px from the right side of the web page.

 

Therefore i paste the code