Сужаются icons при наведении мышки на меню (a:hover), как исправить?

Question

[N_Elena]

Здравствуйте, с наступившим новым годом!

Задача сделать topmenu - (градиент, лого и меню) как в макете design (https://cloud.mail.ru/public/LeC9/Qw5mVfrr3)
Проблема: при наведении #topmenu a:hover, сужаются icons.
Код: https://cloud.mail.ru/public/wQVM/CckWsVMnM
Выяснила, что это происходит из-за дополнительных параметров в #topmenu a:hover:
border-left: 1px solid #545454;
border-right: 1px solid #545454;

Пробовала, указать в #topmenu a:
border-left: 1px solid translate;
border-right: 1px solid translate;

Comments

[Вадим]

Пробовала, указать в #topmenu:
border-left: 1px solid translate;
border-right: 1px solid translate;

А надо было для #topmenu a

[N_Elena]

Вадим, в (#topmenu a) и указывала, сейчас в описании исправлю

[Вадим]

N_Elena, а ещё скачивать себе чужой код, как Вы предлагаете, залив его в облако - сомнительная идея.
Если почитаете правила данного сервиса, то увиде что рекомендованы такие сервисы как jsfiddle и codepen.
Это и удобно и ответят Вам так быстрее

[N_Elena]

Вадим, Посмотрела https://jsfiddle.net - зарегистрировалась, но там ничего невозможно загрузить (картинки, иконки) а как тогда показать что именно не так. С облаком сложнее, но там же есть проверка на вирусы.

[Вадим]

N_Elena, для воспроизведения проблемы редко нужны реально используемые изображения, но да, с этой точки зрения песочницы имеют некоторую недоработку. Насколько я помню, codesandox её лишён.
В данном случае это не важно. Для воспроизведения Вашей проблемы нужно минимум разметки и минимум css`а.

Answer 1

[N_Elena]

Получилось подогнать используя box-shadow
#topmenu a:hover {
border-bottom: 4px solid #d38a01;
box-shadow: 0px 0px 1px #545454; }

Answer 2

[Александр Талалаев]

border - влияет на геометрию(ширину и высоту) элемента, поэтому чтобы убрать эффект вам нужно либо задать border у элемента изначально(без наведения), пусть будет прозрачным:

#topmenu a {
// ...
 border-left: 1px solid transparent;
 border-right: 1px solid transparent;
}

Либо заменить border на трюк с псевдоэлементами(before и after) задав им соответствующие дизайну стили, либо поиграться со свойством background.