Why is my search bar (top left) looking like this and how do I fix it?
Origin Theme
Topic summary
Search bar in the top-left of a Shopify store (Origin theme, xodarlingco.com) is rendering incorrectly. The store owner shared the URL and asked for a fix.
Likely cause: CSS positioning on the
element when it’s open. The selector details[open] targets the open state of that element; adjusting its position property corrects layout issues.
Proposed fixes:
- Via Theme Settings > Customize > Theme Settings > Custom CSS: add
details[open] { position: unset !important; }
A screenshot was provided showing the corrected appearance. - Via Edit code (base.css): add
details[open] { position: inherit; }
Another screenshot showed an improved result.
Both solutions aim to override problematic positioning to fix the search bar/header layout. Images are central to understanding the visual change.
No confirmation from the store owner that either fix was applied or resolved the issue, so the outcome remains unconfirmed/ongoing.
2 Likes
please do!
what do you need from me?
yes
Hi @haleyg98
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- Paste the code provided into the Custom CSS section.
details[open] {
position: unset !important;
}
Here is the result: https://prnt.sc/QPskBO880dFq
I hope this helps
Best,
Daisy
Hello @haleyg98
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
details[open] {
position: inherit;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks