Header Logo on Mobile Drawer Menu (Tinker)

Store Design
, , ,

Topic summary

A user wants to display their header logo on top of the mobile drawer menu in Shopify’s Tinker theme, as the menu currently covers the logo.

Initial Response:

  • One commenter notes this is already a built-in feature in Tinker’s default settings and suggests checking theme configuration before pursuing custom code
  • Recommends providing inspectable URLs rather than PDFs for troubleshooting

Proposed Solution:
Another user provides a two-step customization approach:

  1. HTML modification: Insert logo code into header.liquid or mobile-menu-drawer.liquid within the drawer container element
  2. CSS styling: Add custom CSS to position the logo with proper z-index and padding adjustments

Current Status:

  • The original poster attempted implementation but cannot locate the drawer container elements (.drawer__inner or .mobile-menu) in their theme files
  • Requesting additional guidance on exact file locations for code insertion
  • Issue remains unresolved and ongoing
Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hi All,

I am wanting to display my header logo on the mobile menu of the ‘Tinker’ theme. Currently, the menu covers the header and logo. I want my logo to sit on top of this menu either in the middle or to the right (again at the top of the drawer menu). Can someone provide me with the code or custom css that I am needing in order to do this? (See attached photo)

Thank you in advance!

2

@tuckerkaide Double check the settings.

What your describing is already a feature in Tinker, see the mobile preview

https://themes.shopify.com/themes/tinker/styles/tinker/preview?mobile=true

Unless you’ve customized the theme and need additional advanced theme customizations

Also why upload a pdf for this, a pdf is suspicious.

If it’s meant for screenshots just add images directly to the post.

Better than image provide inspectable urls for website related issues.

Avoid adding hoops when seeking solutions it’s a costly business behavior.

https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/2254458

If you need this customization done then contact me by my email for services.

Or if you have access use a private message by clicking here (sloooower).

Other contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hey @tuckerkaide ,

Hi! I can help you place the header logo at the top of the mobile menu drawer for the Shopify Tinker theme.

Follow these Steps:

  1. Online Store

  2. Themes

  3. Edit Code

  4. Search for header.liquid or a similar file like mobile-menu-drawer.liquid, often located in:

  • sections/header.liquid

  • Or snippets/mobile-menu-drawer.liquid

  1. Insert your logo inside the mobile menu drawer
  • Look for the element that opens the drawer menu, then in the drawer container (e.g., .drawer__inner, .mobile-menu, or similar), add your logo HTML just inside the top of that element:
  1. Custom CSS to position and style the logo

Go to your theme’s CSS file,

  • assets/theme.css

  • assets/base.css

  • custom.css

Add this at the bottom:

/* Style for mobile menu logo */
.mobile-menu-logo {
  position: relative;
  z-index: 1001;
  background-color: white; /* or match your menu background */
}

.drawer--is-open .drawer__inner {
  padding-top: 80px; /* Add padding to account for logo height */
}

If you’d like to help me implement this, please feel free to message me or reach out via email. Thanks!

Best,

Rajat

[Shopify Expert]

4

Hi Rajat,

Thank you for your reply! I can see where it will work, but I cannot find where to insert the first code you provided could you help me identify where I need to put that code at? I tried to search for drawer__inner & .mobile-menu, but was unsuccessful with both.