Hover on header elements

Hi everyone

Website: https://www.shopfragrant.com/

When I hover on one of the header buttons, others start to move to the sides. Is there a CSS command to prevent them from moving?

The navigation link are moving because the text gets wider because of the bolding on hover. You could add a minimum width to the nav links, but that probably would probably have a negative impact on the spacing. Removing the bold hover would stop them moving too.

You are right it's because of the bolding on hover, that's the effect I wanted to achieve. Can you suggest a CSS command that would add a minimum width to the nav links? I would try and see if it works

You can try this Custom CSS:

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
    min-width: 10em;
}

Isn't there a command that would "glue" nav links to the header? 

Thanks for the CSS, however it's not working. Elements that are next to the hovered one still move

On 10/17/2023 at 8:21 PM, Jeremy2338 said:

Isn't there a command that would "glue" nav links to the header? 

Thanks for the CSS, however it's not working. Elements that are next to the hovered one still move

 

 

Use this new code

.header-nav .header-nav-item {
    min-width: 10em;
    overflow: hidden;
    max-width: 150px;
}
.header-nav .header-nav-item a {
    display: inline-block;
}

@tuanphan  

On 10/23/2023 at 2:38 AM, Jeremy2338 said:

@tuanphan  

What is problem?

@tuanphan elements are way too far from each other

On 10/27/2023 at 2:20 AM, Jeremy2338 said:

@tuanphan elements are way too far from each other

You can adjust this number

On 10/29/2023 at 3:51 AM, tuanphan said:

You can adjust this number

1 - 2em width looks fine, however the elements that are next to the hovered one still move

9 minutes ago, Jeremy2338 said:

1 - 2em width looks fine, however the elements that are next to the hovered one still move

The purpose of the 10em was to exceed the width of the header navigation links so they don't move on hover/bold, if you set it to 2em it will do nothing which is why you still get the shifting. 

You can either set the width as suggested and have wider than ideal spacing not getting the shift on hover, or you can have better spacing and live with the shifting on hover, alternatively you can change the hover style. Sadly there's not much else to be done with this.