如何使用 HTML 和 CSS 修复导航栏汉堡

Question

## I'm trying to create responsive navigation bar using HTML and CSS but my 
navigation burger is not displaying in mobile view ##

这是我的 fiddle： [jsfiddle] (https://jsfiddle.net/abhishekpakhare/nxcdso7k/1/) .

Answer 1

为什么不使用 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>

如何使用 HTML 和 CSS 修复导航栏汉堡

how to fix the Navigation bar burger using HTML and CSS

html

css

navigationbar

responsive-design