Hey im using Motion Theme,
Does anybody know how to put search tool and cart into the 3 lines so the headers won’t be as filled up as it is now?
Please help and leave codes down below
Topic summary
Goal: declutter Motion Theme header by moving the search tool and cart into the hamburger menu (three lines). The requester asked for code to achieve this.
Proposed fix: a helper suggested a CSS tweak to expand the header icons container width:
- CSS: .header-item.header-item–icons { max-width: 100% !important; }
- Initial steps: add to theme.scss.css (not found by requester). The requester tried theme.scss.liquid but it didn’t work.
Follow-up approach: insert the same CSS inside a block in theme.liquid just before .
Notes:
- This solution adjusts layout (icon container width) rather than integrating search/cart into the hamburger menu. It may reduce crowding but doesn’t move elements into the menu structure.
- theme.liquid is the main layout file; adding a there ensures the CSS loads site-wide.
Status: no confirmation of success; original request (placing search and cart inside the hamburger menu) remains unresolved/uncertain.
Hi @Anonymous
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 theme.scss.css
Step 3: Paste the below code at bottom of the file → Save
.header-item.header-item–icons {
max-width: 100% !important;
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
I dont have a theme.scss.css file
I put it in theme.scss.liquid file and it doesnt work
