Помогите решить проблему. Меню прыгает при наведении. То есть сдвигается влево и вправо.. Нужно чтобы просто фон был при наведении и все.. Сетка bootstrap
body {
font-family: "Museo Sans Cyrl", sans-serif;
font-weight: 900;
padding: 0;
margin: 0;
}
#first {
background: url(../img/header.png) no-repeat center top /cover;
height: 100vh;
}
header {
background: rgba(0, 0, 0, 1);
height: 77px;
}
.overlay {
position: absolute;
height: 100vh;
left: 0;
top: 0;
width: 100%;
background: rgba(79,134,157,1);
background: -moz-linear-gradient(-45deg, rgba(79,134,157,1) 0%, rgba(0,0,0,0.69) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(79,134,157,1)), color-stop(100%, rgba(0,0,0,0.69)));
background: -webkit-linear-gradient(-45deg, rgba(79,134,157,1) 0%, rgba(0,0,0,0.69) 100%);
background: -o-linear-gradient(-45deg, rgba(79,134,157,1) 0%, rgba(0,0,0,0.69) 100%);
background: -ms-linear-gradient(-45deg, rgba(79,134,157,1) 0%, rgba(0,0,0,0.69) 100%);
background: linear-gradient(135deg, rgba(79,134,157,1) 0%, rgba(0,0,0,0.69) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f869d', endColorstr='#000000', GradientType=1 );
}
ul, li {
padding: 0;
margin: 0;
display: block;
}
.main_menu_list_item a {
font-size: 11px;
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
color: #fff;
border: 1px solid transparent;
}
.main_menu_list_item {
margin: 25px 23px 0 23px;
}
.main_menu_list_item a:hover {
padding: 10px;
background: #375f73;
border-radius: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<section id="first">
<header id="header">
<nav id="navbar">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="nav_logo">
<img class="logo" src="img/logo.png" alt="Логотип">
</div>
</div>
<div class="col-md-7">
<ul class="main_menu_list d-flex justify-content-center">
<li class="main_menu_list_item">
<a href="#">Главная</a>
</li>
<li class="main_menu_list_item">
<a href="#">О компании</a>
</li>
<li class="main_menu_list_item">
<a href="#">Недвижимость и переезд</a>
</li>
<li class="main_menu_list_item">
<a href="#">Контакты</a>
</li>
</ul>
</div>
<div class="col-md-3 d-flex">
<div class="icon">
<i class="fa fa-phone"></i>
</div>
<div class="phone">
+7 (495) 12-321-345<br>
+7 (495) 12-321-345
</div>
</div>
</div>
</div>
</nav>
</header>
</section>
При :hover
вы элементу добавляете padding
из за этого он смещается ("прыгает"), установите нужный padding
для элемента по дефолту и при :hover
меняйте только фон. + для этого элемента(ссылки) лучше добавить еще свойство display: inline-block/block/flex
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть блок в который добавляются другие блоки, если уменьшить ширину окна, скролл не появляется и блоки просто пропадают, затем при увеличении...
Ребят, скачал open-sourse файл HTML/CSS/JS, а там - играХотел её поиграть, разобраться в коде