I have made my header sticky, but when you scroll the search icon becomes unaligned like this:
It only happens when the header becomes sticky.
Topic summary
A user is experiencing a visual alignment issue with their search icon when their header becomes sticky on scroll. The icon appears misaligned only in the sticky state.
Troubleshooting attempts:
- One responder requested the store URL and password to investigate the exact issue
- Another provided a CSS solution targeting the search icon with specific margin-bottom adjustments for screens under 767px width
Current status:
The suggested CSS fix did not resolve the problem. The user suspects the issue may be related to existing custom CSS code they previously used to reposition the search icon (using absolute positioning with specific top and left percentage values). The discussion remains open with no working solution yet identified.
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hi @EthanOSHOP
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
summary.header__icon.header__icon–search.header__icon–summary.link.focus-inset.modal__toggle svg {
margin-bottom: 13vw !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
It still doesn’t seem to be working. Is it something to do with the code I used to move it to the left?
summary.header__icon.header__icon–search.header__icon–summary.link.focus-inset.modal__toggle {
position: absolute !important;
left: 14.75% !important;
top: 14% !important;
}