Shopify themes, liquid, logos, and UX
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:
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!
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.
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?
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.
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?
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025