@HalvinBRO

Почему неправильно работает media-запрос?

После загрузки файлов на хост выпадающее по клику меню отображается некорректно, но на пк отображается все как надо. Интересует момент, когда меню развернуто, т.е. осуществлен клик мышкой.
5e8a68f64273d590454987.jpeg5e8a68f8d04fa177168838.jpeg
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>PROJECT</title>
	<link rel="stylesheet" href="style2.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
	<div class="header">
		<div class="logo">LO<font color="white">GO</font></div>
		<div class="topnav" id="myTopnav">
			  <a href="#home">Home</a>
			  <a href="#news">News</a>
			  <a href="#contact">Contact</a>
			  <a href="#about">About</a>
			  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
			  &#9776;</a>
		</div>
	</div>

	<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
body{
	font-family: 'Open Sans', sans-serif;
}
a{
	text-decoration: none;
}
.header {
	position: fixed;
	width: 100%;
	height: 150px;
	background-color: #000000;
	z-index: 1;
}
.logo {
	display: inline-block;
	margin-left:10%;
	margin-top:102px;
	color: #00B060;
	font-size: 35px;
	font-weight: 600;
	z-index: 2;
	background-color: #000;
}
.topnav {
	position: absolute;
	top: 120px;
	right:10%;
	display: inline-block;;
    background-color: #000000;
}
.topnav a {
	position: relative;
	float: left;
	display: block;
	color: #ffffff;
	text-align: center;
	padding: 0px 30px;
	text-decoration: none;
	font-size: 17px;
}
.topnav a:hover {
    transform: scale(1.15,1.15);
	color: #00B060;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 720px) {
	.topnav {
		right: 0px; 
	}
	.topnav a {
		display: none;
	}
	.topnav a.icon{
		display: inline-block;
		position: absolute;
  		right: 0px;
  		top: -11px;
  		font-size: 30px;
	}
	  .topnav.responsive {
	  	top:0px;
	  	margin-left:0%;
	  	position: relative;
	  	display: block;
	}
	  .topnav.responsive a {
	    float: none;
	    display: block;
	    text-align: left;
	    padding: 5px 0 5px 10%;
	}
	  .topnav.responsive a:hover {
	    transform: scale(1,1);
		color: #00B060;
		background-color: #1B1B1B;
	}
	.topnav.responsive a.icon {
		display: inline-block;
		position: absolute;
 		right: 0px;
  		top: -41px;
  		font-size: 30px;
  		padding: 0 30px;
	}
}
  • Вопрос задан
  • 58 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы