Help needed with mobile view icons

Store Design
, , , , , , , , , , ,

Topic summary

Issue: In mobile view, the login icon appears at the bottom of the navigation drawer, while desktop shows cart, search, and login together. Desired outcomes: ideally keep all three icons visible in the mobile header; if not, place cart and login at the top and move search to the bottom of the mobile menu.

Cause: Theme-specific layout renders the account/login element within the mobile menu rather than the header icon container.

Proposed fix: Move the code that renders the account/login in mobile view into the header icons container (often referred to as the header icons caret div), then adjust CSS (margin and padding) for proper spacing. A brief code snippet and an “after” screenshot were provided to illustrate the login icon in the header post-change.

Notes: Images/screenshots are central to understanding the placement before/after the change. The store URL and password were shared for reference.

Status: No confirmation of implementation or outcome yet. The request to reposition the search icon (to the bottom) is not explicitly addressed in the provided fix. Discussion remains open with action item to update theme code and refine CSS.

Summarized with AI on December 25. AI used: gpt-5.
1

Hi,
I have three icons (cart, search, and login) on my website’s desktop view. However, in the mobile view, one of the icons (login) is positioned at the bottom of the mobile navigation menu. Ideally, I want all three icons to be visible in the header on mobile view at all times. If that’s not possible, I would prefer to have the cart and login icons at the top, with the search icon moved to the bottom of the mobile navigation menu. Any assistance with this would be greatly appreciated.

Attaching a group of screenshots for reference

Store address: https://testingstoresandthemes.myshopify.com/
password: lock

screesns2.png
screesns2.png4499×1019 533 KB

2

Hi @technase , This placement is due to the theme you are using,
It can be solved by simply moving the part of code that renders account in mobile view to the header icons caret div
and then adjusting the margin and padding to make it look better

this is after moving the code

Dawood_Mirza__0-1720418778893.png
Dawood_Mirza__0-1720418778893.png365×826 185 KB


 
 Login

this is the code you need to add

Hope it helps
BR
Dawood Mirza

1 Like