2

При наведении курсора на пункт меню используя 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>

2

1 ответ 1

0

Вы меняете размер шрифта, и ссылки у вас инлайновые. Конечно, они потянут за собой остальные элементы, и контент будет "дергаться". Оберните ссылку, сделайте обертку независимой от контента ссылки. Например вот так:

.navbar-list-menu{
  width: 100%;
  line-height: 50px;
  
  display: table;
  table-layout: fixed;
}
.navbar-list-menu span{
  display: table-cell;
}
.navbar-list-menu a{
  margin-right: 55px;
  text-decoration: none;
  color: #eee;
  font-size: em(14px)
  font-family: "OpenSansLight", sans-serif;
  text-transform: uppercase;
  transition: all 0.5s ease;
  
  display: inline-block;
}
.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">
  <span><a href="">Home</a></span>
  <span><a href="">About</a></span>
  <span><a href="">Store</a></span>
  <span><a href="">Blog</a></span>
  <span><a href="">Pages</a></span>
  <span><a href="">Contact</a></span>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.