Прыгает меню при наведении (hover) на пункты

273
29 октября 2018, 05:20

Помогите решить проблему. Меню прыгает при наведении. То есть сдвигается влево и вправо.. Нужно чтобы просто фон был при наведении и все.. Сетка 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>

Answer 1

При :hover вы элементу добавляете padding из за этого он смещается ("прыгает"), установите нужный padding для элемента по дефолту и при :hover меняйте только фон. + для этого элемента(ссылки) лучше добавить еще свойство display: inline-block/block/flex

READ ALSO
Не появляется скроллбар

Не появляется скроллбар

Есть блок в который добавляются другие блоки, если уменьшить ширину окна, скролл не появляется и блоки просто пропадают, затем при увеличении...

202
CSS Blur Overlay

CSS Blur Overlay

Как создать такой эффект в CSS?

159
Как избежать Access to Script from origin &#39;null&#39; has been blocked by CORS policy?

Как избежать Access to Script from origin 'null' has been blocked by CORS policy?

Ребят, скачал open-sourse файл HTML/CSS/JS, а там - играХотел её поиграть, разобраться в коде

276