При наведении курсора на пункт меню используя hover, элемент должен менять размер(font-size) и шрифт(bold), тут всё гладко)НО... Но так же меняется и размер родительского блока, который приводит к сдвигу всех элементов меню на пару пикселей!
Как избавиться от этих сдвигов?
.navbar-list-menu{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
line-height: 50px;
}
.navbar-list-menu a{
margin-right: 55px;
text-decoration: none;
color: #000;
font-size: em(14px)
font-family: "OpenSansLight", sans-serif;
text-transform: uppercase;
transition: all 0.5s ease;
}
.navbar-list-menu a:hover{
color: #666;
font-size: em(16px);
font-family: "OpenSansBold", sans-serif;
box-shadow: 0px 5px 0px 0px rgba(255,64,129,1);
}
<div class="navbar-list-menu">
<a href="">Home </a>
<a href="">About</a>
<a href="">Store</a>
<a href="">Blog</a>
<a href="">Pages</a>
<a href="">Contact</a>
</div>