Impulse Theme : Change position of Mobile Hamburger Menu

Store Design
, , , ,

Topic summary

Main issue: Move the mobile hamburger (navigation) icon next to the bag icon and display the word “MENU” beneath it in the Impulse theme.

Key steps taken:

  • The helper requested the store URL; the user shared it.
  • Solution provided: add a small CSS snippet in Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS.

What the CSS does (mobile only, up to 768px):

  • Reorders the navigation icon so it sits next to the bag icon (using flex order and relative positioning).
  • Uses an ::after pseudo-element to insert the label “MENU” below the hamburger icon, with small font size and centered positioning.

Outcome:

  • A screenshot confirmed the visual change with the “MENU” label under the icon.
  • The requester thanked the helper, indicating the solution worked.

Status: Resolved. No remaining questions or outstanding actions.

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

Hello,

I would like to move the hamburger menu next to bag option and also wanted to add word “MENU” beneath hamburger Icon.

Thank you in advance!

Screenshot 2024-11-19 142413.png
Screenshot 2024-11-19 142413.png477×773 180 KB

2

Hi @AlgreenSM

Please kindly share with me your store URL and Password if it is password protected

Best,

Daisy

3

Thank you for your response Daisy. Here is our website

https://algreenproducts.com/

4

Hi @AlgreenSM

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
.header-item.header-item--icons .site-nav__icons > button.site-nav__link.site-nav__link--icon {
    order: 2;
    position: relative;
}
.header-item.header-item--icons .site-nav__icons > button.site-nav__link.site-nav__link--icon::after {
    content: "MENU";
    font-size: 10px;
    position: absolute;
    bottom: -50%;
    right: 50%;
    transform: translateX(50%);
}
}

Here is the result: https://prnt.sc/nZeuMVQOcPtu

I hope this helps,

Best,

Daisy

5

Thank you very much!