Adding zoom on hover in navigation bar in dawn theme.

Store Design
, ,
1

Hi,

My website - https://adisi-coffee.myshopify.com/

I am trying to add zoom on hover in navigation bar menu.

For that I have used -

.list-menu–inline :hover {
transform: scale(1.02);
}

But now the menus are zooming twice, once when the mouse is on padding and then when it’s on the text.

I want it to hover only once, when on the padding.

Regards.

2

To achieve the desired effect of zooming only when hovering over the padding and not the text in the navigation menu, you can modify your CSS code as follows:

.list-menu--inline li:hover > a {
  transform: scale(1.02);
}
3

Thanks for the reply,

It is working, But SHOP AND ABOUT( Menu with sub Menus) are not zooming on hover.

4

@adisicoffeeindi add below css into base.css file

.header__menu-item span:hover {
    transform: scale(1.2) !important;
}