创建响应式导航栏，可以通过CSS中的媒体查询实现。关键是要在不同屏幕尺寸下，改变导航栏布局。
为了实现这个目标，在CSS中，可以使用Flexbox或Grid布局来制作导航菜单，并建议使用带有汉堡菜单图标的下拉按钮，以便在移动设备上显示。
下面是一个示例代码，它会在屏幕宽度小于600像素时将导航栏转换为响应式导航栏：
/* 在屏幕小于 600px 时隐藏导航菜单 */
@media screen and (max-width: 600px) {
.nav-menu {
display: none;
}
/* 创建汉堡菜单按钮 */
.burger-menu {
display: block;
background-image: url('menu-icon.png');
background-size: cover;
width: 30px;
height: 30px;
cursor: pointer;
}
/* 点击汉堡菜单按钮时显示导航菜单 */
.burger-menu:focus + .nav-menu {
display: block;
}
}
/* Flexbox 布局 */
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.nav-menu {
display: flex;
justify-content: center;
align-items: center;
}
.nav-menu li {
list-style: none;
margin-left: 20px;
}
/* Grid 布局 */
@media screen and (min-width: 601px) {
.nav-menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
}以上示例代码中，@media是媒体查询的语法，max-width表示屏幕宽度不超过600像素时应用样式，而burger-menu和nav-menu是类选择器（class selector），前者用于设置汉堡菜单按钮的样式，后者用于设置整个导航栏菜单的样式。Flexbox布局可以使导航项目靠左对齐并在中央进行垂直对齐，Grid布局则可用于创建菜单项网格布局。
但是需要注意的是，以上代码只是一个简单的示例，并且可能需要根据具体的需求进行调整。