categoris in the header move, when hovering over them

Deutsch Diskussion Shopify Design

Topic summary

A user is experiencing an issue where header menu categories shift position when hovered over on their Shopify store.

Problem identified:

  • The hover effect triggers CSS changes that alter the size and positioning of menu items
  • The site appears to use a customized Dawn theme with a DIY menu rather than the original Dawn menu structure

Proposed solution:

  • Locate and modify the CSS causing the hover effect in the Assets -> base.css file (or inline <style> tags)
  • Either comment out the problematic CSS rule (e.g., .header-menu__item:hover { transform: scale(1.1); })
  • Or add an override rule using !important to force transform: none

Current status:

  • The suggested CSS fixes did not resolve the issue
  • The user was unable to locate the correct code to modify
  • The problem remains unresolved and may require further investigation into the custom menu implementation
Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hey, is it be possible for the categories in the header to stay the same and not move when you hover over them?

my site: https://8929c6-2.myshopify.com

2

Hey @corneliorrr

Thanks for the question and you have reached the German community here but we can chat in English too!

And thanks for your link. Is that a very customised Dawn Theme? It seems your menu is a DIY menu, and NOT the original Dawn Theme menu, is that correct? What is happening is that the mouse-over is causing the CSS of the menu items to change their size and positioning.

01-26-jet6d-96t2n.gif

So you will need to edit the CSS code of the menu, in the Assets → base.css file. Sometimes, the CSS is inline, meaning it’s in a tag right in the HTML file. The way to prevent a hover effect would be to find the relevant CSS and either remove it or comment it out.

Here’s a typical CSS hover effect that could be causing this:

.header__menu-item:hover {
   transform: scale(1.1);
}

To disable it, comment it out like so:

/*
.header__menu-item:hover {
   transform: scale(1.1);
}
*/

Or, to override it without altering the original CSS (maybe it’s a shared file), you can add a new rule at the end of your Assets → base.css file (or in a separate CSS file that loads after the original) like this:

.header__menu-item:hover {
   transform: none !important;
}

The !important rule in CSS is a way to make your CSS rule take precedence over other potentially conflicting rules. It’s generally not the best practice to use it because it can make debugging and maintenance harder later.

Hope that helps! :wink:

3

Thanks for the answer, but it didn’t work for me. I think I couldn’t find the right code.