小编mac*_*ork的帖子

我的页面上有这个导航栏设置，我希望它可以在平板电脑或台式机上正常工作，然后当加载到移动设备上时，导航栏将被压缩为可按下的汉堡菜单。

解决这个问题的最佳方法是什么？

HTML和CSS代码如下

HTML

<h1 class='logo'><a href='#'>Website Logo</a></h1>
<nav>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Blog">Blog</a></li>
<li><a href="#Portfolio">Portfolio</a></li>
</ul>
</nav>
</header>

CSS

header{
    display: flex;
    justify-content: space-around;
    width: 100%;
    background: #616880;
    height: 70px;
}
.sticky {
    position: fixed;
    top:0;
    width: 100%;
}
.logo{
    margin: 15px 0 0 0;
}
nav {
    margin: 25px;
}
ul li{
    list-style: none;
    display: inline;
}
ul li a,
h1 a{
    text-decoration: none;
    color: #fff;
    padding: 5px;
}