Header Logo on Mobile Drawer Menu (Tinker)

[tuckerkaide]

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!

[PaulNewton]

@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.

[rajweb]

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

5.  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:

<div class="mobile-menu-logo" style="text-align: center; padding: 20px 0;">
  <img src="{{ settings.logo | img_url: '200x' }}" alt="Logo" style="max-height: 50px;">
</div>

6. 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]

[tuckerkaide]

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.