как исправить бургер панели навигации с помощью HTML и CSS - PullRequest
0 голосов
/ 08 июля 2019
## I'm trying to create responsive navigation bar using HTML and CSS but my 
navigation burger is not displaying in mobile view ##

Вот моя скрипка: [jsfiddle] (https://jsfiddle.net/abhishekpakhare/nxcdso7k/1/).

1 Ответ

0 голосов
/ 08 июля 2019

Почему вы не используете Bootstrap?Попробуйте простой код ниже (без Bootstrap):

.buger {
	margin-left: auto;
	display: none;
}
.buger div {
	width: 20px;
	border-top: 3px solid #454545;
	padding-bottom: 3px;
}
.flex {
	display: flex;
}
@media (max-width: 576px) {
	.buger {
		display: block;
	}
	.menu {
		display: none;
	}
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div class="flex">
		<nav class="menu">
			<a href="">Menu 1</a>
			<a href="">Menu 2</a>
			<a href="">Menu 3</a>
		</nav>
		<div class="buger">
			<div class="line-1"></div>
			<div class="line-2"></div>
			<div class="line-3"></div>
		</div>
	</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...