header increases as soon as you hover over

Solved
corneliorrr
Shopify Partner
27 0 5

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

Accepted Solution (1)
Moeed
Shopify Partner
2413 604 726

This is an 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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

- Expert in Shopify SEO optimization for higher search rankings.


- Your Coffee Tip , my code - a perfect blend! ❤️

View solution in original post

Replies 9 (9)
NomtechSolution
Trailblazer
1245 111 139
  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;
}
​

 

Chat on WhatsApp: +923246370042
Need a Shopify developer? noumanmasood64@gmail.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
dmwwebartisan
Shopify Partner
12215 2537 3661

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
corneliorrr
Shopify Partner
27 0 5

ok, what is it exactly  for?

Moeed
Shopify Partner
2413 604 726

This is an 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

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

- Expert in Shopify SEO optimization for higher search rankings.


- Your Coffee Tip , my code - a perfect blend! ❤️
corneliorrr
Shopify Partner
27 0 5

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

dmwwebartisan
Shopify Partner
12215 2537 3661

@corneliorrr 

 header gets bigger as soon as you hover over a category  

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ujjaval
Shopify Partner
1242 197 191

@corneliorrr add below css into theme.css file 

ul.list-menu.list-menu--inline span:hover {
    border-radius: 0px !important;
    padding: unset !important;
}
dmwwebartisan
Shopify Partner
12215 2537 3661

@corneliorrr 

Thanks Welcome again if any problem!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
corneliorrr
Shopify Partner
27 0 5

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