categoris in the header move, when hovering over them

[corneliorrr]

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

[Gabe]

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.

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 <style> 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! 😉

[corneliorrr]

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