что сделать с nav чтобы оно не двигалось при hover?

183

31 января 2020, 01:00

Здесь ссылка на кодпен, ячейки меню двигаются вниз при наведениии курсора. Как сделать так, чтобы они оставались на месте ? Я добавил max-height, но это не помогло CSS

  a:hover
    border-top: #4acaff solid 4px  
    max-height: 15px

p.s. использую bootstrap и sass

Answer 1

Добавьте изначально для ссылки прозрачную границу сверху, чтобы при наведении граница не появлялась, а просто окрашивалась:

border-top: transparent solid 4px

Answer 2

a
  border-top: 4px solid transparent
  max-height: 15px
a:hover
  border-top-color: #4acaff

Answer 3

Посмотри этот код - там я немного подправил. Может это тебе понравится)

a.nav-link text-decoration: none margin: 0 32px 0 0 border-top: 4px solid transparent transition: all .2s // You can delete this &:hover border-top-color: #4acaff

Answer 4

Используй box-shadow вместо border-top