Bug with search bar after position adjustment

Store Design
, , , ,
1

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
Kuelah_0-1697384694274.png345×335 5.32 KB

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!

2

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

3

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?

4

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?

5

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

6

Hi, I think you can use the code

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