制作响应式导航栏需要使用到CSS中的媒体查询（media query）和flex布局。
首先，我们需要在HTML中创建导航栏的结构，可以使用无序列表（ul）和列表项（li）来实现。如下所示：
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>接下来，在CSS中设置导航栏的样式，包括背景色、字体大小、字体颜色等。在这个过程中，我们可以使用flex布局来让导航栏的列表项水平排列。
nav {
background-color: #333;
color: #fff;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
flex: 1;
text-align: center;
}
nav a {
color: #fff;
display: block;
font-size: 18px;
padding: 15px;
text-decoration: none;
}接下来，我们需要使用媒体查询来设置导航栏在不同屏幕尺寸下的样式。在移动设备上，我们可以将导航栏的列表项隐藏起来，并在页面顶部添加一个菜单按钮，点击菜单按钮后可以展开列表项。这可以通过设置菜单按钮的display属性为none，以及使用伪元素和transform属性实现。在大屏幕上，我们可以保持原来的样式不变。
@media only screen and (max-width: 768px) {
nav ul {
flex-direction: column;
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: 100%;
background-color: #333;
overflow-y: auto;
transition: all 0.5s ease;
}
nav ul.show {
left: 0;
}
nav li {
text-align: center;
margin: 20px 0;
}
nav a {
color: #fff;
font-size: 18px;
text-decoration: none;
}
.icon {
display: block;
position: fixed;
top: 0;
right: 20px;
font-size: 24px;
cursor: pointer;
z-index: 999;
}
.icon::before {
content: "\f0c9";
font-family: FontAwesome;
}
nav ul.show .icon::before {
content: "\f00d";
}
}最后，在JavaScript中添加点击菜单按钮展开列表项的功能。这可以通过为菜单按钮添加click事件监听器，并在事件处理程序中为导航栏的ul元素添加show类名来实现。
const icon = document.querySelector('.icon');
const nav = document.querySelector('nav ul');
icon.addEventListener('click', () => {
nav.classList.toggle('show');
});这样，我们就完成了制作响应式导航栏的全部过程。