Tinker theme - how to align submenu beneath parent?

ellie22 · May 19, 2026, 2:02pm

In the Tinker theme, how can I get the submenu to align directly beneath the parent menu item and not be the full width of the screen? Right now, it aligns all the way to the left and takes up the full width.

ellie22 · May 19, 2026, 2:24pm

After more consideration, I think this theme only allows for mega-menu. I would be fine with the regular dropdown menu, but I cannot find an option to turn off mega menu. Anyone know how to achieve that? I’m ok modifying code if I have to. Thank you!

mastroke · May 19, 2026, 2:30pm

Hi ellie22,
paste this code in - base.css or theme.css at the bottom

.header__nav-item {
position: relative;
}

.header__nav-item .mega-menu,
.header__nav-item .submenu,
.header__nav-item [class*=“dropdown”] {
position: absolute !important;
left: 0 !important;
width: auto !important;
min-width: 200px;
max-width: 300px;
}

tim_tairli · May 19, 2026, 2:32pm

Look at this solution – Horizon theme: drop-down menu alignment - #13 by tim_1

Would work for Tinker too.

If your theme is 3.3.0 and newer, there code is in this post, but start reading from the one above.

Wsp · May 20, 2026, 11:31am

Hey @ellie22

Check theme settings first

Go to:
Shopify Admin → Online Store → Customize → Header

Check if there is an option such as:

Mega menu
Menu style
Navigation type

If available switch it from Mega Menu to Dropdown and save changes.

This is the only no-code and fully safe solution if your theme supports it.

If no setting is available

In many Tinker theme versions the mega menu is hard coded into the theme structure. In this case there is no built in option to disable it.

Required code-level solution

Go to:
Online Store → Themes → Edit Code

Check the following files:

header.liquid
header-navigation.liquid
mega-menu.liquid if present

Look for references like:

mega-menu
render ‘mega-menu’
mega menu wrapper containers
4. What needs to be changed

To convert mega menu into a standard dropdown:

Remove or disable the mega menu structure in the header/navigation file
Replace it with the standard nested submenu structure (dropdown menu)

This is the only permanent and correct solution when no theme setting exists.

Important clarification
CSS can only adjust appearance and positioning
CSS cannot fully convert a mega menu into a dropdown menu if the structure is hard-coded
The actual behavior is controlled by Liquid + theme structure

Thank You !

devcoders · May 20, 2026, 2:34pm

Hi @ellie22

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

namphan · May 20, 2026, 3:27pm

Hi @ellie22,

Please go to Edit theme > Header > Menu > Style > Text only.

After you choose to display only text, I will guide you through the changes to the dropdown using CSS code.

ellie22 · May 20, 2026, 8:02pm

Thank you everyone for the suggestions! They have been very helpful!

I am not very experienced with Shopify, but I have a decent software background, and I’m not afraid to adjust code when necessary.

Here’s what I’ve learned:

(1) Tinker theme (3.5.0) has no ability to easily turn off “Mega Menu” and get a default dropdown menu

(2) There is a CSS resolution. Mine still needs some help, but it’s promising. I will share details and remaining issues below.

(3) I leveraged the CSS anchor function to help set the position of the “dropdown” menu. This was a new function for me. And, yes, I cheated a little bit. I put the anchor-name property on exactly the item that needed the dropdown. I couldn’t find a different CSS way to get the position I wanted.

(4) Shopify Custom CSS is fussy. If it doesn’t like your CSS, it just deletes it? You really can’t use anchor in there. I guess it’s too new for Shopify. I ended up putting my changes in base.css.

Below is the little bit of CSS that I added. It probably needs adjustment for smaller devices. The main thing I had to overcome was getting rid of display:grid on several of the classes. The other adjustment was to set the width of the menu (fixed is fine for me right now), and setting the left position of that menu. That’s where the anchor code is helpful. I still have an issue though. Even though the width of the submenu is 350px - when the submenu displays, the full page width of the background of the menu is white. I don’t know how to fix that yet. Here’s the code I have so far:

.header-menu li:nth-child(2 of .menu-list__list-item) a {

anchor-name: --productapps;

}

.header-menu .menu-list__submenu {

width: fit-content;

max-width: 350px;

left: anchor(–productapps left);

}

.header-menu .menu-list__submenu-inner {

display: block;

}

.header-menu .menu-list__submenu-inner .mega-menu {

display: block;

}

.header-menu .menu-list__submenu-inner .mega-menu .mega-menu__grid {

display: block;

}

Maximus3 · May 21, 2026, 1:54am

If you haven’t gotten too heavy on customization, I think now would be a good time to try another theme. Dawn has dropdown already aligned. Plus, you could select mega menu if you wanted to do that instead.

devcoders · May 21, 2026, 3:13am

Hi @ellie22

Dear, please send me your store URL. Also, send a screenshot or reference of the design you want. That will make it easier for everyone to understand exactly how you want the submenu alignment to look.

Best regards,
Devcoder

tim_tairli · May 21, 2026, 4:26am

(1) – yes.
(4) – yes, unfortunately it is.

An alternative is to use a “Custom Liquid” sections/blocks and add your CSS code wrapped with <style> and </style> – effectively the same as adding them in liquid code, but this does not complicate future updates like direct code edits can.

Be aware that theme code will move your menu elements if they do not fit on one line for narrower desktop window.

Hopefully, it’s not an issue for you since your drop-down is under second top level item, but my solution I’ve linked above addresses this by also controlling .overflow-menu::part(overflow) and [slot=overflow] elements.

anchor is a nice tool, but it may be not compatible with older browsers, but then Horizon “family” itself is not very compatible with them too.

SealSubs-Roan · May 23, 2026, 10:05am

Hello @ellie22

Most Tinker themes include mega menu styles as standard, however you can always override this with CSS or change the navigation style in the theme options if available. If not, go to edit header liquid remove the mega menu wrapper class then style the submenu so the nested ul has position absolute, top 100 percent, left 0 and width auto. This will align the dropdown under the parent item and not stretch the full width. You might also want to remove any full width container styling on the dropdown wrapper to get a normal dropdown again.

ellie22 · May 23, 2026, 8:55pm

Thank you for the tip. I have gone down that path and edited two of the liquid files to get rid of the use of the grid. I am using a small bit of my original CSS to position the submenu below the parent item … BUT the background is still filling up the width of the screen.

I cannot figure out how to get rid of it. The submenu is only 350 px wide. It looks like the width is set when I look in the console.

Here is the site: https://chlorine-dioxide-store-2.myshopify.com/

Password: osprey

If anyone knows how to get rid of that huge white background, I’d be thrilled! (And, of course I will share the code.)

Thank you!

tim_tairli · May 24, 2026, 10:03am

The code I’ve shared above has this rule:

.header__underlay {
  display: none;
}

This will remove the underlay below the header and megamenu.

If you want to keep the underlay under header, then rather use this:

.header__underlay {
  max-height: var(--header-height);
}

Then you’d need to provide background for the drop-downs, something like this:

.header-menu .menu-list__submenu, 
.overflow-menu::part(overflow) {
  background: var(--color-background) !important;
  padding: 1rem 1rem 0;
  min-height: var(--full-open-header-height);
}

That will make it like this:

You’d need to address the “More” overflow submenu on narrow desktop browsers screens though…

ellie22 · May 24, 2026, 3:13pm

Thank you!!! This was the necessary piece. I’m sorry I missed it before. Your insights and understanding of menus/submenus is wonderful!

In the end, I made edits to two liquid files to turn off the mega-menu classes:

(1) snippets > mega-menu-list.liquid
line 106 - changed class=“mega-menu__column” to class=“no-mega-menu__column” and deleted the rest of the items on the line.
line 75 - deleted this line which contained the data-menu-list-id
line 76 - changed the class to: no-mega-menu__list

(2) blocks > _header-menu.liquid
line 114 - changed this line to be:

line 116 - changed this line to be: class=“no-mega-menu…”
line 117 - deleted this line (had to do with data-menu-grid-id)

Then for CSS, here is what is added to base.css

.header-menu li:nth-child(2 of .menu-list__list-item) a {
  anchor-name: --productapps;
}

.header-menu .menu-list__submenu {
  width: auto !important;
  max-width: 280px;
  left: anchor(--productapps left) !important;
}

.header-menu .menu-list__submenu, 
.overflow-menu::part(overflow) {
  background: var(--color-background) !important;
  padding: 1rem 1rem 0;
  min-height: var(--full-open-header-height);
}

.header__underlay {
  max-height: var(--header-height);
}

.header-menu .list-unstyled {
  padding: 5px 10px;
}

ellie22 · May 24, 2026, 3:16pm

Quick addendum. Line 114 is: div class=“no-mega-menu”

(I guess some HTML gets stripped out of posts!)

Topic		Replies	Views
How to fix dropdown on Tinker theme Store Design themes	2	31	June 4, 2026
Savor Theme- megu menu bar; submenu drop down not aligned u help Store Design customizations , css , shopify-themes , troubleshooting	4	144	January 21, 2026
Fix Dropdown Menu (Shopify Dawn THeme) Store Design menu , design , header , customizations , css , shopify-themes , html	2	121	July 18, 2024
Dawn theme 13.0, mega menu alignment issue Store Design menu , header , customizations , shopify-themes	11	122	October 14, 2024
Can I change the mega menu dropdown to appear directly under the menu item I've clicked? Store Design menu , header , shopify-themes , troubleshooting	6	201	July 9, 2024

Tinker theme - how to align submenu beneath parent?

Related topics