<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 90px 10px;
  transition: 0.4s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

#navbar a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: dodgerblue;
  color: white;
}

#navbar-right {
  float: right;
}

@media screen and (max-width: 580px) {
  #navbar {
    padding: 20px 10px !important;
  }
  #navbar a {
    float: none;
    display: block;
    text-align: left;
  }
  #navbar-right {
    float: none;
  }
}
</style>
</head>
<body>

<div id="navbar">
<a href="#default" id="logo">Логотип</a>
<div id="navbar-right">
<a class="active" href="#home">Главная</a>
<a href="#contact">Контакты</a>
<a href="#about">О нас</a>
</div>
</div>

<div style="margin-top:210px;padding:15px 15px 2500px;font-size:30px">
<p><b>В этом примере показано, как уменьшить панель навигации, когда пользователь начинает прокручивать страницу.</b></p>
<p>Прокрутите этот фрейм вниз, чтобы увидеть эффект!</p>
<p>Прокрутите вверх, чтобы удалить эффект.</p>
<p><b>Примечание:</b> Мы также сделали панель навигации адаптивной, измените размер окна браузера, чтобы увидеть эффект.</p> 
<p>Lorem ipsum dolor фиктивный текст, позволяющий прокручивать, сидеть на месте, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum ullamco Laboris Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor в осуждении за сладострастие velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint ocaecat cupidatat not proident, sunt in culpa qui officia deserunt mollit anim id est Laborum.</p>
</div>

</body>
</html>

Сообщить об ошибке: