Change menu side

Store Design
,

Topic summary

A user wants to reposition the menu icon to where the shopping cart currently appears in their Shopify store header.

Initial Solution:

  • Another user provided CSS code to swap the positions using flexbox order properties
  • The code targets the header elements and changes their display order on mobile viewports (max-width: 988px)

Implementation Issue:

  • The original poster confirmed the solution worked initially but later stopped functioning
  • This appears related to conflicting CSS code elsewhere in the theme

Troubleshooting Steps:

  • Use browser search (CTRL + F) to find conflicting order: 1 !important declarations in theme files (theme.liquid or header.liquid)
  • Delete the conflicting code snippet that’s overriding the custom CSS
  • The custom code should be added to the base.css file

Status: The discussion provides a working solution with troubleshooting guidance for conflicts, though implementation requires locating and removing duplicate/conflicting CSS rules.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hello guys, I want to put the menu icon where the car is, can you help me?

IMG_2676.jpeg
IMG_2676.jpeg1170×361 24.8 KB

https://www.behumblee.com/

Pass-Humblee3030

I use refresh theme

2

Screenshot from 2024-05-21 18-50-49.png
Screenshot from 2024-05-21 18-50-49.png1806×828 245 KB

Screenshot from 2024-05-21 18-50-35.png
Screenshot from 2024-05-21 18-50-35.png1806×828 236 KB

Hello, Here just change the CSS with your order value, remove important from both, and as per the above screenshot please make changes in your styles.

3

Hi , I want for mobile view to :grin:

4

Add this code in your base.css file:

@media (max-width: 988px) {
    #shopify-section-sections--17005268730034__header .header.header--top-left.header--mobile-left.page-width.drawer-menu.header--has-menu.header--has-social.header--has-localizations header-drawer {
        order: 3 !important;
        margin: 14px;
    }
}

Result:

result.PNG
result.PNG651×815 406 KB

5

Hey , put on base css and done work for me :sob:

6

Don’t worry, if you find this code and delete it, the previous code will work.

@media (max-width: 988px) {
    #shopify-section-sections--17005268730034__header header-drawer {
        order: 1 !important;
    }
}

You can search for example in: theme.liquid or header.liquid. To do this, click on the code of the file in question, press CTRL + F to open the word search, add this phrase: order: 1 !important; and click on “Next”, the code should appear, delete it.