Add account login icon to mobile header

Ask & Offer

Topic summary

A user seeks help displaying the account login icon in their mobile header alongside search and cart icons, rather than hidden in a dropdown menu. Their attempted CSS solution in base.css didn’t work.

Problem identified: One responder explains the issue—CSS alone cannot move elements, only style them. The icon needs HTML/SVG code added to the header structure.

Solutions offered:

  • Add CSS code to base.css targeting the account icon with display: block !important at mobile breakpoints (max-width: 749px or 767px)
  • Alternative approach: Insert the CSS as a <style> block in theme.liquid before the closing </body> tag
  • One user requests collaborator access to implement the full solution directly

Status: Multiple similar CSS-based solutions provided, though one responder suggests a more comprehensive approach may be needed. The discussion remains open pending confirmation of which solution works.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I’m looking to move the account login icon from the dropdown menu to my header along with my search and cart icons. I’ve tried the code recommended on a couple of YouTube channels and it’s not working (in base.css)
@media (max-width: 767px) {

a.header__icon.header__icon–account {

display: inline-flex !important;

}}

If anyone could please look my website is https://jwxf8m-wb.myshopify.com/ and password is palyug.

Thanks in advance :slight_smile:

2

Hey @formebrows,
Thanks for bringing this Query to Shopify community.
In order to move the account login icon from the Dropdown menu to the header requires to add the html and svg in the header
But in your case you are using the css which is used for the styling not adding the elements.
So, in order to fulfill your requirements I need to take a look in your theme file.
Could you please share the 4 digits collab code in the p/m so that I can add the login icon on mobile near the hear icons.
Waiting to hear back from you.
thanks

3

Hi @formebrows ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

@media screen and (max-width: 749px) {
    a.header__icon.header__icon--account.link.focus-inset.small-hide {
        display: block !important;
    }
}

image
image373×546 62.3 KB

4

hey dear @formebrows follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like

<style>
@media screen and (max-width: 767px) {
a.header__icon.header__icon--account.link.focus-inset.small-hide {
    display: block !important;
}
}
</style>
5

Hi @formebrows
Please put below code in theme.liquid before body closing tag </body>

<style>
@media screen and (max-width: 749px) {
    a.header__icon.header__icon--account.link.focus-inset.small-hide {
        display: block !important;
    }
}
</style>

Please like and accept the solution if it works for you

Thanks!