FROM CACHE - de_header

categoris in the header move, when hovering over them

corneliorrr
Shopify Partner
27 0 5

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 ANTWORTEN 2

Gabe
Shopify Staff
17313 2743 4050

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

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

corneliorrr
Shopify Partner
27 0 5

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