header increases as soon as you hover over

[corneliorrr]

Hello, I have the problem that the header gets bigger as soon as you hover over a category with the mouse cursor. The reason for this is probably the coding that is for the box around the categories. But I would like to still keep this box. Could you maybe help me with that?

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

[NomtechSolution]

1. In the left-hand sidebar, navigate to the "Assets" folder and open the file that contains your theme's CSS (usually named theme.scss.liquid or theme.css.liquid).
2. Scroll down to find the CSS code related to the hover effect on the categories.

/* Example CSS code */
.navigation__dropdown-link:hover {
  /* Hover styles here */
  font-size: 20px;
  color: red;
}
​

[dmwwebartisan]

@corneliorrr 

Please add the following code to your assets/base.css bottom of the file.

.header__menu-item {
    padding: 0rem 1.2rem !important;
    display: unset !important;
}

Thanks!

[corneliorrr]

ok, what is it exactly  for?

[Moeed · Accepted solution]

Hey @corneliorrr 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.header__menu-item {
    padding: 0rem 1.2rem !important;
    display: block !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[corneliorrr]

Ah, Thank you, would it also be possible for the categories to stay the same and not move when you hover over them?

[dmwwebartisan]

@corneliorrr 

 header gets bigger as soon as you hover over a category  

[Ujjaval]

@corneliorrr add below css into theme.css file 

ul.list-menu.list-menu--inline span:hover {
    border-radius: 0px !important;
    padding: unset !important;
}

[dmwwebartisan]

@corneliorrr 

Thanks Welcome again if any problem!

[corneliorrr]

 yes, would it also be possible for the categories to stay the same and not move when you hover over them?